jQuery的自動完成下拉列表還顯示的是什麼類型的

只是快速原型設計了一個項目示範一個jQuery自動完成地址。jQuery的自動完成下拉列表還顯示的是什麼類型的

基本上，當用戶鍵入的地址初始輸入字段，它自動顯示可能的地址（addresspicker樣式）的下拉列表。

我只需要在地址列表「您鍵入：」中插入第一項作爲第一項以反映在輸入框中輸入的內容。

參見：

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Autocomplete</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <style> 
#results { float: right; } 
#address { float: left; } 
</style> 
    <script> 
    $(function() { 

    $("#results").hide(); 

    var addresses = [{ 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Brisbane", 
     state: "Queensland", 
     postcode: "4000" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Mandaring", 
     state: "WESTERN AUSTRALIA", 
     postcode: "6073" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Creek Road", 
     loc: "Werombi", 
     state: "NEW SOUTH WALES", 
     postcode: "2570" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Collingwood Park", 
     state: "QUEENSLAND", 
     postcode: "4301" 
    }, { 
     value: "Level 25/167 Smith", 
     add1: "25/167 Smith Terrace", 
     loc: "Auchenflower", 
     state: "QUEENSLAND", 
     postcode: "4066" 
    }, 
    ]; 

    $("#address").autocomplete({ 
     minLength: 0, 
     source: addresses, 
     focus: function(event, ui) { 
//  $("#address").val(ui.item.add1 + ", " + ui.item.loc + ", " + ui.item.state + " " + ui.item.postcode); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#address").val(ui.item.label); 
     // $("#address-id").val(ui.item.value); 
     $("#address-add1").val(ui.item.add1); 
     $("#address-loc").val(ui.item.loc); 
     $("#address-state").val(ui.item.state); 
     $("#address-postcode").val(ui.item.postcode); 
     $("#results").show(); 
     return false; 
     } 

    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.add1 + ", " + item.loc + ", " + item.state + " " + item.postcode + "</a>") 
     .appendTo(ul); 
    }; 
    }); 
    </script> 
    </head> 
    <body> 
    <p>Start by typing "25"</p> 
<input id="address" /> 
<div id="results"> 
    <p> 
    <input id="address-add1" /> 
    </p> 
    <p> 
    <input id="address-loc" /> 
    </p> 
    <p> 
    <input id="address-state" /> 
    </p> 
    <p> 
    <input id="address-postcode" /> 
    </p> 
    </div> 
</body> 
</html>

來源

2013-04-08 hotdiggity

他們所輸入的仍然會在輸入框中，所以這個又是什麼目的？ – 2013-04-08 02:49:16

嘗試

var eladdress = $("#address").autocomplete({ 
      minLength : 0, 
      source : addresses, 
      focus : function(event, ui) { 
       // $("#address").val(ui.item.add1 + ", " + 
       // ui.item.loc + ", " + ui.item.state + " " + 
       // ui.item.postcode); 
       return false; 
      }, 
      select : function(event, ui) { 
       $("#address").val(ui.item.label); 
       // $("#address-id").val(ui.item.value); 
       $("#address-add1").val(ui.item.add1); 
       $("#address-loc").val(ui.item.loc); 
       $("#address-state").val(ui.item.state); 
       $("#address-postcode").val(ui.item.postcode); 
       $("#results").show(); 
       return false; 
      } 

     }); 

var _renderMenu = eladdress.data("ui-autocomplete")._renderMenu; 
eladdress.data("ui-autocomplete")._renderMenu = function(ul, items) { 
    $('<li></li>').text('You Typed: ' + eladdress.val()).appendTo(ul); 
    _renderMenu.apply(this, arguments); 
} 


eladdress.data("ui-autocomplete")._renderItem = function(ul, 
     item) { 
    return $("<li>").append("<a>" + item.add1 + ", " + item.loc 
      + ", " + item.state + " " + item.postcode + "</a>") 
      .appendTo(ul); 
};

演示：Fiddle

來源

2013-04-08 03:01:51

我喜歡js中的如何訪問私人功能:) – basarat 2013-04-08 03:05:11

@BasaratAli在jquery ui的情況下，它是一種可接受的方式來覆蓋私有方法，因爲演示本身顯示它，您可以查看[category demo] （http://jqueryui.com/autocomplete/#categories），看看他們是如何建議重寫'_renderItemData'方法。 – 2013-04-08 03:08:56

也沒有什麼作爲在Java中的私人方法，在Java中，'_'是一種機制，建議它不是一種API方法，但內部的一個可能會在未來的版本中沒有任何通知更改 – 2013-04-08 03:10:00

jQuery的自動完成下拉列表還顯示的是什麼類型的

回答

相關問題