Getting issue in jquery ui autocomplete

Question

I have implemented jquery UI autocomplete.Mouseover is working properly on list but when I use down arrow key it display id also in text box which I don't want as given below: for example id 119 is displaying in below image.

enter image description here

What can I do now?

Thanks

Pete_Gore · Accepted Answer · 2014-06-04 12:05:15Z

1

You should have a look on the doc : http://api.jqueryui.com/autocomplete/#method-_renderItem The "_renderItem" allows you to customize the displayed list.

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( $( "<a>" ).text( item.label ) )
    .appendTo( ul );
}

Edit : here is a complete code I use to display both ID and item name in the list :

$("input.project-code").autocomplete({
        minLength: 2,
        source: availableProjects,
        focus: function( event, ui ) {
            $(this).val(ui.item.value);
            return false;
        },
        select: function( event, ui ) {
            $(this).val(ui.item.value);
            $(this).change();
            return false;
        }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
            .append( "<a>" + item.value + " - " + item.name + "</a>" )
            .appendTo( ul );
    };

answered Jun 4, 2014 at 12:05

Pete_Gore

6441 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sukhjeevan Over a year ago

Actually in my case when I use down arrow key id value is displaying but I don't want that So what I have to do for that?

Pete_Gore Over a year ago

I think you can have a look on this part of the code : focus: function( event, ui ) { $(this).val(ui.item.value); return false; },

Pete_Gore Over a year ago

The focus: part allows you to choose what to put in the input when you focus an item with your arrow keys

Collectives™ on Stack Overflow

Getting issue in jquery ui autocomplete

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related