JQuery Mobile：格式自動完成結果

我正在爲內部Web應用程序的移動選項工作。我已經在PC端的自動選擇工作，但在移動側觀看時，顯示在搜索結果只是看起來不好： bad format http://www.rkrdevel.com/files/mobile_autoselect.png JQuery Mobile：格式自動完成結果

理想情況下，我想有列表視圖看起來更像是一個降名單。當顯示在手機上時，我明白它可以列在鍵盤下方，但現在可以。

我在主站點和移動站點上都使用了相同的代碼片段。爲了確定它是否是移動設備，我調用了一個我稱之爲：check_mobile（）的函數。

我在某處找到了自動選擇代碼，但不知道如何去應用格式到結果集。任何幫助表示讚賞。

HTML：

<div class="ui-widget"> 
    <p>To find a customer, enter the Customer name, all lower case and no spaces. For example, bwi or t&r</p> 
    <label for="Customer">Customer Name: </label> 
    <input id="Customer" placeholder="Search"/> 
    <div class="ui-widget" id="results" style="width: 600px; font-weight: bold; border-bottom: black;">Search Results: </div> 
    <div data-theme="b" id="custData" data-collapsed="true" data-role="collapsible"></div><!--class="ui-widget-content"--> 
</div>

jQuery的自動選擇功能：

init: function(){ 
    $('#results').hide(); 
    $("#Customer").val(''); 
    $("#Customer") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      delay: 500, 
      source: function(request, add) { 
       $.getJSON(cust.url+"?funct=1" , {term: cust.extractLast(request.term)}, function(data) { 
        //create array for response objects 
        var suggestions = []; 
        //process response 
        for(var i =1, ii=data[0];i<=ii;i++){ 
         suggestions.push(data[i].ABAN8 + ':' + $.trim(data[i].ABDC)); 
        } 
        //pass array to callback 
        add(suggestions); 
       }); 
      }, 
      search: function() { 
       // custom minLength 
       $("#custData").hide(); 
       $('#results').hide(); 
       var term = cust.extractLast(this.value); 
       if (term.length < 2) { 
        cust.clearReportData(); 
        return false; 
       } 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = cust.split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       cust.getfulldetail(ui.item.value); 
       return false; 
      } 
     }) 
     .focus(); 
},

來源

2012-12-06 radi8

什麼有關使用[搜索過濾器欄（http://jquerymobile.com /demos/1.2.0/docs/lists/lists-search.html）？ – Taifun

這是一個AJAX選擇。它搜索遠程數據庫爲用戶類型 – radi8

檢查我的答案 –

有許多用於JQM自動完成的解決方案，你會想看看JQM autocomplete或this implementation。

來源

2012-12-06 15:02:08 Romain

我在尋找JQM自動完成搜索結果應顯示在div而不是推div的down.can你可以幫助 –

具體這裏的問題是，你忘了的CSS文件添加到您的解決方案，並且排序問題，例如

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.9.2.custom.css" />

來源

2013-02-27 16:26:18

JQuery Mobile：格式自動完成結果

回答

相關問題