autocomplete check when focus is lost

jquery jquery-ui javascript jquery-autocomplete

10,299

You should bind to proper event. I think you should bind to close event. then check value of input contains element in array. Else you should make input empty again using val. I tested it myself locally and it does the trick.

$( "#tags" ).autocomplete({
    source: availableTags,
    close: function(event, ui) {
        var inputValue = $( "#tags" ).val();
        var idx = jQuery.inArray(inputValue, availableTags);
        if (idx == -1) {
            $( "#tags" ).val("");           
        }
    }
});

P.S: I did some more testing and I think you should bind it to another event instead. Because when you tab to navigation bar it does not work. I think you should bind to blur event instead.

The improved code =>

$( "#tags" ).autocomplete({
    source: availableTags
});

$( "#tags").blur(function() {
    var inputValue = $( "#tags" ).val();
    var idx = jQuery.inArray(inputValue, availableTags);
    if (idx == -1) {
        $( "#tags" ).val("");           
    }
});

json to array =>

json.txt:

[{"id":1,"value":"ActionScript"},{"id":2,"value":"AppleScript"},{"id":3,"value":"Asp"},{"id":4,"value":"BASIC"},{"id":5,"value":"C"},{"id":6,"value":"C++"},{"id":7,"value":"Clojure"},{"id":8,"value":"COBOL"},{"id":9,"value":"ColdFusion"},{"id":10,"value":"Erlang"},{"id":11,"value":"Fortran"},{"id":12,"value":"Groovy"},{"id":13,"value":"Haskell"},{"id":14,"value":"Java"},{"id":15,"value":"JavaScript"},{"id":16,"value":"Lisp"},{"id":17,"value":"Perl"},{"id":18,"value":"PHP"},{"id":19,"value":"Python"},{"id":20,"value":"Ruby"},{"id":21,"value":"Scala"},{"id":21,"value":"Scheme"}]

$(function() {
    var LIMIT = 10;
    $.getJSON("json.json", function(data) {
        var autocomplete = $( "#tags" ).autocomplete({
            source: function( request, response ) {
                var i=0;
                var result = [];
                $.each(data, function(index, value) {
                    // value.value.search(/request.term/i);
                    var idx = value.value.toLowerCase().indexOf( request.term.toLowerCase() );
                    if (idx >= 0) {
                        result.push(value.value);
                        i++;
                    }
                    if (i === LIMIT) {
                        return false;
                    }
                });
                response(result);
            }
        });

        $( "#tags").blur(function() {
            var inputValue = $( "#tags" ).val();
            var clear = true;
            $.each(data, function(index, value) { 
                if (value.value == inputValue) {
                    clear = false;
                    return false;
                }
            });
            if (clear) {
                $( "#tags" ).val("");
            }
        });
    });
});

10,299

Author by

oshirowanen

Updated on June 29, 2022

Comments

oshirowanen almost 2 years
How do I ensure the value in the input field always has a value from the source only?

For example, if in the source I have
```
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
```
which is database driven as the actual script is:
```
source: "get_json.aspx";
```
and in the input field I type just "cold", how do I stop this from happening?

How do I ensure that the value exists in the source when focus is lost from the input field?
oshirowanen over 13 years

What if the source is a url, which returns json?
Alfred over 13 years

Then you should check if that source contains text of input value. In my opinion if the source isn't too big you should use array to avoid round-trips to the server.
oshirowanen over 13 years

Yes, that is what I was trying to avoid. But I don't know how to get the source into an array to avoid the round trip...
Alfred over 13 years

what server-side language are you using? And from where are you getting your data? From your site?
oshirowanen over 13 years

I am using asp.net and yes, it is our in-house company server. The data is coming from an ms sql server query.
Alfred over 13 years

Oops I know a lot of programming languages, but I don't know asp.net :$. But an array is just a very simple structure. Just loop over the elements in the sql database and add them to the appending it to your string(which looks like array).
oshirowanen over 13 years

I've done all the server-side stuff and I have a json array which the asp.net page returns in the form of source: "get_json.aspx". I don't know how to put this array into a standard JavaScript array or how to extract the array from within .autocomplete?
Alfred over 13 years

@oshirowanen I think it would be easier if we just chat => 4827315.speeqe.com
oshirowanen over 13 years

The only way I can think of doing this is on document.ready, have an .ajax function which gets the data from the database, makes a clientside level array which can be used in other parts of the javascript including the close event of autocomplete. I am hoping there is a better way of doing this?
oshirowanen over 13 years

@Alfred: I tried your new script, and for some reason it always clears the input field as on blur?
Alfred over 13 years

@oshirowanen you are completely right lol. I only checked that it did get data :P. I will update my code. Hang on one second!
Alfred over 13 years

I finished it. stupid me. It isn't a pure array anymore so I needed to update some parts of my code.