ansaurus

Question

jQuery autocomplete. Doesn't reveal existing matches.

Answer 1

+1 A:

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!

Herald_MJ 2010-05-05 19:25:06

Thank you a lot for your reply. I did find the feature with object passing instead of simple string to the source of the autocomplete. Haven't got the time right now to go back to that sequence and make it right. The main 2 reasons why I would chose autocomplete plugin over the UI feature are the fact that the text gets highlighted to indicate the matches in the string, and the fact that I can enforce only strict matches, while the UI feature really accepts any string.

Alexander 2010-05-06 07:46:09

This is made so as the user can select a house from the database using Autocomplete rather than select (too many houses for a select box), and when a value is selected, that IS present in the database, the button next to the select gets assigned a function that retrieves through AJAX the house information.

Alexander 2010-05-06 08:01:06

the 'change' parameter I handed to the autocomplete() function in my example replicates the mustMatch functionality of the plugin - enforcing only strict matches. Bear in mind though, that whichever library you choose to use, they're both server side javascript. A user can simply choose to disable the javascript and submit whatever data they like to the server. The text highlighting is a fair point though.

Herald_MJ 2010-05-06 09:18:19

Thank you very much. Now I'll only have to make an optional feature, to highlight the matched fragment(s) in every option.

Alexander 2010-05-07 13:01:34

Oh, and this is done not for security (security is managed server-side), but so that I won't have to show an error message like "please select an item that exists in the list" or something like that.

Alexander 2010-05-07 13:03:48

ansaurus

tags:

views:

answers:

jQuery autocomplete. Doesn't reveal existing matches.

related questions