Question

I was trying this Demo by jQuery UI on my own project and found one essential modification in need for it. See on below Demo :

http://jqueryui.com/demos/autocomplete/#custom-data

In this example, When we type “j” and select any one option, it fetch some text and logo related to it. Which is working fine. Here, lets say we select “jQuery” from the auto-suggestions given. It will load text and jQuery logo on the left side. But suppose after doing this, if we delete some characters of the word “jQuery” from textbox then it should reset and display blank outputs. But it remains same text and logo which loaded previously.

In general, what I want to do is, user must select something from autosuggestion and not write anything that is not in the auto suggestions give.

How can we do that?

Thanks in advance.

Answer 1

you can override the select and change event to achieve this:

 $(".combobox").autocomplete({
    minLength: 0,
    source: function (request, respond) {
        //some source
    },
    change: function (event, ui) {
        //if no value inside the LI, reset the input -> uses a custom selector
        if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
    },
    select: function (event, ui) {
        $(this).val(ui.item.Name);
    }
 );

You just need a custom selector to compare the text-input:

$.expr[':'].textEquals = function (a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};