jQuery UI Autocomplete: name instead of label

Question

I am using 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>

//Not Working

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

I want code should work with name instead of label any idea how can i resolve this problem..

i am following this link "http://jqueryui.com/autocomplete/#custom-data"

if i will change name from label code will work fine.

could you please explain "if i will change name from label code will work fine."? — Nilesh Thakkar
– Nilesh Thakkar, Commented Jan 2, 2014 at 9:06
Nilesh if i will replace name from label in my code it will work fine. like [{"id":134,"label":"Bangalore"},....] and "ui.item.label", item.label..... — Rajesh Gurbani
– Rajesh Gurbani, Commented Jan 2, 2014 at 9:10

Nilesh Thakkar · Accepted Answer · 2014-01-02 09:15:23Z

You've to change one or the other. Either you change the property names of array or your code.

Check below code:

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

Check out this fiddle

Collectives™ on Stack Overflow

jQuery UI Autocomplete: name instead of label

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related