Question

我正在使用Jquery Ui1.10.3 + jquery 1.10.2

<div class="ui-widget">
   <label for="tags">From</label>
   <input type="text" id="tags">
   <input type="hidden" id="tags-id">
</div>

//不工作

<script type="text/javascript">
var states = [{"id":134,"name":"Bangalore"},{"id":1198,"name":"Pune"},{"id":1199,"name":"Jaipur"},{"id":1,"name":"Pune"},{"id":11,"name":"KB cross"},{"id":111,"name":"silk board"},{"id":2,"name":"xvb"},{"id":22,"name":"As peta"},{"id":222,"name":"Mangalore"},{"id":3,"name":"Mysore"},{"id":33,"name":"Panjab"},{"id":333,"name":"Delhi"},{"id":4,"name":"Mumbai"},{"id":44,"name":"Chandigarh"},{"id":444,"name":"Ajmer"},{"id":5,"name":"Odisa"},{"id":55,"name":"New delhi"},{"id":555,"name":"agra"},{"id":6,"name":"Jammu"}];

     $( "#tags" ).autocomplete({
        maxLength: 5,
        source: states,
        // Focus - if you mouse over any item the input field replace by that value
        focus: function( event, ui ) {
          $( "#tags" ).val( ui.item.name );
          return false;
        },
        // Select - If you  select any item it'll give the values (ID) and label
        select: function( event, ui ) {
          $( "#tags" ).val( ui.item.name ); // Label display
          $( "#tags-id" ).val( ui.item.id ); // Assign ID with respect city.

          // TODO - As of now no required
          // $( "#project-description" ).html( ui.item.desc );
          // $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

          return false;
        }
      })
      // Build the List Items
      .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
                .append( "<a>" + item.name + "</a>" )
                .appendTo( ul );
      };

    </script>

我希望代码应该使用名称而不是标签任何想法如何解决这个问题..

我关注此链接“http://jqueryui.com/autocomplete/#custom-data”

如果我从标签代码更改名称将正常工作。

Answer 1

你要改变其中一个。您可以更改数组或代码的属性名称。

检查以下代码：

<强> HTML

<div class="ui-widget">
   <label for="tags">From</label>
    <input type="text" id="tags"/>
    <input type="hidden" id="tags-id"/>
</div>

<强>的JavaScript

var states = [{"id":134,"name":"Bangalore"},{"id":1198,"name":"Pune"},{"id":1199,"name":"Jaipur"},{"id":1,"name":"Pune"},{"id":11,"name":"KB cross"},{"id":111,"name":"silk board"},{"id":2,"name":"xvb"},{"id":22,"name":"As peta"},{"id":222,"name":"Mangalore"},{"id":3,"name":"Mysore"},{"id":33,"name":"Panjab"},{"id":333,"name":"Delhi"},{"id":4,"name":"Mumbai"},{"id":44,"name":"Chandigarh"},{"id":444,"name":"Ajmer"},{"id":5,"name":"Odisa"},{"id":55,"name":"New delhi"},{"id":555,"name":"agra"},{"id":6,"name":"Jammu"}];

     $( "#tags" ).autocomplete({
        maxLength: 5,
        source:  function( request, response ) {
                var matcher = new RegExp( "^" +   $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( states, function( item ){
              return matcher.test(item.name );
          }) );
      },
        // Focus - if you mouse over any item the input field replace by that value
        focus: function( event, ui ) {
            console.log( ui.item.name );
          $( "#tags" ).val( ui.item.name );
          return false;
        },
        // Select - If you  select any item it'll give the values (ID) and label
        select: function( event, ui ) {
            console.log( ui.item.name );
            console.log( ui.item.id );
          $( "#tags" ).val( ui.item.name ); // Label display
          $( "#tags-id" ).val( ui.item.id ); // Assign ID with respect city.

          // TODO - As of now no required
          // $( "#project-description" ).html( ui.item.desc );
          // $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

          return false;
        }
      }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
                .append( "<a>" + item.name + "</a>" )
                .appendTo( ul );
      };

查看此fiddle

jQuery UI自动完成：名称而不是标签

1 个答案: