проверка автозаполнения при потере фокуса - PullRequest
Новая
       4

проверка автозаполнения при потере фокуса

3 голосов
/ 28 января 2011

Как мне убедиться, что значение в поле ввода всегда имеет значение только из источника?

Например, если в источнике у меня есть 

source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]

, который управляется базой данныхкак фактический сценарий: 

source: "get_json.aspx";

, и в поле ввода я просто набираю " cold ", как мне этого избежать?

Как мнеубедиться, что значение существует в источнике, когда фокус потерян из поля ввода?

1 Ответ

5 голосов
/ 28 января 2011

Вы должны связать с соответствующим событием.Я думаю, что вы должны связать событие закрытия .затем проверьте значение ввода содержит элемент в массиве .В противном случае вы должны снова сделать ввод пустым, используя val .Я сам проверил это локально, и это помогает. 

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

PS: Я провел еще несколько тестов, и я думаю, что вы должны вместо этого связать его с другим событием.Потому что, когда вы вкладываете в панель навигации, это не работает.Я думаю, что вместо этого следует связать событие blur .

Улучшенный код => 

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

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

json для массива =>

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("");
            }
        });
    });
});
...