0

只需为项目演示快速制作 jQuery 地址自动完成原型。

基本上，当用户在初始输入字段中键入地址时，它会自动显示可能地址的下拉列表（地址选择器样式）。

我只需要插入地址列表中的第一项“您输入：”以反映输入框中输入的内容。

看：

http://jsfiddle.net/hotdiggity/NFeEH/

<!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>
4

1 回答 1

1

尝试

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);
};

演示：小提琴

于 2013-04-08T03:01:51.970 回答