Question

Is there a way of using jQuery UI autocomplete not to open a suggestion pulldown but populating an existing select box?

A similar workaround can be done with

http://www.barelyfitz.com/projects/filterlist/

or

http://andrew.hedges.name/experiments/narrowing/

But can we use jQuery UI?

Answer 1

At last I’ve figured this out after many hours. After redigging autocomplete’s data bind as Bouillou redirected me I did these to achieve my goal.

1. First, I replaced the search function by adding mine for adding a line for cleaning all previous select box contents. Here is my new search function:

        search: function( event, ui ){
            $("#links_list option").remove(); // This line is added
            var str = '';
            for(var attr in event){
                str += attr.toString() + '\n';
            }
            console.log(str);
   
            var str2 = '';
            for(var attr in ui){
                str2 += attr.toString() + '\n';
            }
            console.log(str2);
        },
   

2. I then tweaked .data binding and _renderItem. return $(''); is breaking the process and only returns one suggestion with a null suggestion box. (Which I don’t want to see either.)

Then I changed the original return(.....) in _renderItem function to this:

        return $('<option value="'+item.value+'">'+item.label+'</option>')
        .appendTo("#links_list");

You can see a sample screen result below.