失去焦点时自动完成检查答案

【问题标题】：autocomplete check when focus is lost失去焦点时自动完成检查
【发布时间】：2011-01-28 10:45:44
【问题描述】：

如何确保输入字段中的值始终只有来自源的值？

例如，如果在源中我有

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

这是数据库驱动的，因为实际脚本是：

source: "get_json.aspx";

在输入字段中我只输入“cold”，我该如何阻止这种情况发生？

当输入字段失去焦点时，如何确保值存在于源中？

【问题讨论】：

标签： jquery jquery-ui javascript jquery-autocomplete

【解决方案1】：

您应该绑定到适当的事件。我认为你应该绑定到close event。然后检查value of input 包含元素in array。否则，您应该使用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("");
            }
        });
    });
});

【讨论】：

然后您应该检查该源是否包含输入值的文本。在我看来，如果源不是太大，您应该使用数组来避免往返服务器。
您使用什么服务器端语言？您从哪里获取数据？来自您的网站？
哎呀我知道很多编程语言，但我不知道 asp.net :$。但是数组只是一个非常简单的结构。只需遍历 sql 数据库中的元素并将它们添加到将其附加到您的字符串（看起来像数组）。
@oshirowanen 我想如果我们只是聊天会更容易 => 4827315.speeqe.com
@oshirowanen 你完全正确，哈哈。我只检查它确实得到了数据：P。我会更新我的代码。等一下！

【解决方案2】：

$("#tags").autocomplete({
      source: availableTags,
      autoFocus: true,
      selectFirst: true,
      //clear value on lost focus
      change: function (ev, ui) {
        if (!ui.item) {
            $(this).val('');
        }
      }
    })

【讨论】：