Question

I have come across a problem I just can’t solve. I am using autocomplete plugin for jQuery on an input. The HTML looks something like this:

<tr id="row_house" class="no-display">
        <td class="col_num">4</td>
        <td class="col_label">House Number</td>
        <td class="col_data">
            <input type="text" title="House Number" name="house" id="house"/>
            <button class="pretty_button ui-state-default ui-corner-all button-finish">Get house info</button>
        </td>
    </tr>

I am sure that this is the only id="house" field. Other fields that are before this one work fine with autocomplete, and it’s basically the same algorithm (other variables, other data, other calls). So why doesn’t it work like it should work with the following init. code:

$("#house").autocomplete(["1/4","6","6/1","6/4","8","8/1","8/5","10","10/1","10/3","10/4","12","12/1","12/5","12/6","14","14/1","15","15/1","15/2","15/4","15/5","16","16/1","16/2","16/21","16/2B","16/3","16/4","17","17/1","17/2","17/4","17/5","17/6","17/7","17/8","18","18/1","18/2","18/3","18/5","18/95","19","19/1","19/2","19/3","19/4","19/5","19/6","19/7","19/8","20","20/1","20/2","20/3","20/4","21","21/1","21/2","21/3","21/4","22","22/9","23","23/2","23/4","24","24/1","24/2","24/3","24/A","25","25/1","25/10","25/2","25/4","25/5","25/6","25/7","25/8","25/9","26","26/1","26/6","27","27/2","28","28/1","29","29/2","29/3","29/4","30","30/1","30/2","30/3","31","31/1","31/3","32/A","33","34","34/1","34/11","34/2","34/3","35","35/1","35/2","35/4","36","36/1","36/A","37","37/1","37/2","38","38/1","38/2","39/1","39/2","39/3","39/4","40","40/1","41","41/2","42","43","44","45","45/1","45/10","45/11","45/12","45/13","45/14","45/15","45/16","45/17","45/2","45/3","45/6","45/7","45/8","45/9","46","47","47/2","49","49/1","50","51","51/1","51/2","52","53","54","55/7","66","109","122","190/8","412"], {minChars:1, mustMatch:true}).result(function(event, result, formatted) {
                var found=false;
                for(var index=0; index<HChouses.length; index++) //HChouses is the same array used for init, but each entry is paired with a database ID.
                    if(HChouses[index][0]==result)
                    {
                        found=true;
                        HChouseId=HChouses[index][1];
                        $("#row_house .button-finish").click(function() {  
                            QueryServer("HouseConnect","FillData",true,HChouseId); //this performs an AJAX request
                        });
                        break;
                    }
                if(!found)
                    $("#row_house .button-finish").unbind("click");
            });

Each time I start typing (say I press the “1” button), the text appears and gets deleted instantly. Rarely at all after repeated presses I get the list (although much shorter than it should be)

But if after that I press the second digit, the whole thing disappears again.
P.S. I use Firefox 3.6.3 for development.

Answer 1

It seems like what you’re asking is to have a text box using autocompletion, which, when a value is selected, performs some function (QueryServer here) with the id of the selected value. Effectively this is a dynamic ajaxy version of an html <select>. Correct me if that’s wrong.

I’ve done something similar to this recently with jQueryUI autocomplete. You mention in your comments that you’ve tried this with no luck, but I assume you’re interested in a solution using either library. Here’s how I would do it:

$("house").autocomplete({
    source: [{'id': 1, 'value': '10/1'}, {'id': 2, 'value': '10/3'}, {'id': 3, 'value': '10/4'}, ....
    minLength: 1,
    select: function(event, ui) {
        //input will auto-populate with "value" part
        $("#row_house .button-finish").click(function() {  
            QueryServer("HouseConnect","FillData",true,ui.item.id);                           
        });
    },
    //this next function is a hack to replicate the "mustMatch" functionality of the bassistance autocomplete plugin
    change: function (event, ui) {
        var source = $(this).val();
        var found = $('.ui-autocomplete li').text().search(source);
        if(found < 0) { //no match!
           $(this).val('');
           $("#row_house .button-finish").unbind("click");
        }            
    }
});

You might want to declare the source values elsewhere to make it a bit neater.

Hope that helps!