Question

I’ve got a requirement which I have to implement autocomplete, but I’m not sure if I could achieve this in jQuery UI Autocomplete. If I cannot do this in jQuery UI autocomplete could you please suggest the library that can do this or should I build my own library.

The requirement would be I have a list which is just plain javascript ordered array, when user types something the textbox suggests the possible results. When the user clicks the result, the list should change to show the 3 results above the clicked result and the 3 results below the clicked results.

Here’s the code that I’m trying to do.

    $(function() {
        var projects = [
            "List1","List2","List3","List4","List5","List6","List7","List8"
        ];

        $( "#project" ).autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "
" )
                .data( "item.autocomplete", item )
                .append( "" + item.label + "" )
                .appendTo( ul );
        };
    });

For example, if user types “Li” it should pop up “List1”, “List2″ ,”List3”, “List4”, “List5”. Once the user clicks “List3”, the result list should be changed to be “List1″,”List2″,”List3″,”List4″,”List5″,”List6” and ignore “List7”, “List8”

Is this even possible in jQuery UI Autocomplete?

Answer 1

Yeah it sounds like you need to simply interrogate which option is being referenced then use the .next() or .prev() jquery function. These are relative iteration tools (one forward, one backward) and with a little finesse should do what you want. This is plain-jane jquery so you would need to build this into your listener (keystrokes in this case)

next: http://api.jquery.com/next/

prev : http://api.jquery.com/prev/