Jquery autocomplete: using tab to select first item and remain focus on search box

Question

When I use the JQuery UI autocomplete, I need to have the tab key populate the search box with the first item in the autocomplete results, include a space afterwards, an then allow the user to continue typing. ```

``` In other words, in the example above, if someone typed "th", they'd see "this" and "that" in the autocomplete choices. Hitting tab would add "this " (note the space) to the input and focus would remain in the input. Can someone give me a pointer as…

Accepted Answer

Hiya demo http://jsfiddle.net/DMDHC/

Hope this helps, :)

So if you type `Ra` you will see rambo and other options popping up and then hit `tab` key and you will see that `added text + " "` will appear with focus on the text box so that you can keep typing.

Another thing I did is `event.preventDefault();` which will prevent any default behavior, rest you know what you doing bruv! B-)

jquery code

```
$( "#search" ).autocomplete({
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    },
        select: function(event, ui) {

var TABKEY = 9;
            this.value = ui.item.value;

if (event.keyCode == TABKEY) { 
                event.preventDefault();
                this.value = this.value + " ";
                $('#search').focus();
            }

return false;
        }
});

​
```

Jquery autocomplete: using tab to select first item and remain focus on search box

Solution

Problem