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的自动完成下拉列表还显示的是什么类型的

回答

相关问题