jquery autocomplete auto fill field with 1st value and highligh added part

Question

im using jqueryui autocomplete plugin with following code

$(this).autocomplete({
                source: function(request, response) {
                    $.         


        

Answer 1

Unfortunately, there is not an existing option for it. Fortunately, there's a pretty straightforward way to do it using the events supplied with JQuery Autocomplete. Check out this JSFiddle: http://jsfiddle.net/RyTuV/133/

As you'll notice, the relavant code you want to add uses the JQuery Autocomplete Open event:

Triggered when the suggestion menu is opened or updated.

Using this event, you can add the text of the first item in the list to what is already typed into the input filed, and then highlight from after the input text to the end of the added text:

$(this).autocomplete({
    source: function(request, response) {
                $.ajax({ url: 'clinic/auto',
                data: { 'term': this.term,'name': this.element.attr('complete')},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
    },
    minLength: 2,
    open: function( event, ui ) {
        var firstElement = $(this).data("autocomplete").menu.element[0].children[0]
           , inpt = $('#autocomplete')
           , original = inpt.val()
           , firstElementText = $(firstElement).text();

        /*
           here we want to make sure that we're not matching something that doesn't start
           with what was typed in 
        */
        if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
            inpt.val(firstElementText);//change the input to the first match

            inpt[0].selectionStart = original.length; //highlight from end of input
            inpt[0].selectionEnd = firstElementText.length;//highlight to the end
        }
    }
});

Using this as a template, you could loop though the items in the menu to find the first match that starts with the input text, and use that to fill in and highlight, instead of only using the first item.