CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Sukhjeevan
Sukhjeevan

Reputation: 3156

Getting issue in jquery ui autocomplete

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

Upvotes: 0

Views: 180

Answers (1)

Pete_Gore
Pete_Gore

Reputation: 634

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

Upvotes: 1

Related Questions