且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JQuery的自动完成功能验证选定值

更新时间:2023-10-14 14:09:46

我想,而不是写自己的函数以验证数据匹配,你可以叫搜索()。如果结果()是带一个空数据参数,那么你知道,自动完成不使用,通过调用搜索()上模糊,保证能让你获得结果()称为至少一次。

我已经张贴此code a类似的问题,它可以帮助在这里。

  autocompleteField.result(函数(事件,数据格式){
    如果(数据){
        //自动完成匹配
        //注意:这可能会被调用两次,不过没关系
    }
    其他{
        (下同)//必须已经被搜索触发
        //没有匹配
    }
});autocompleteField.blur(函数(){
    autocompleteField.search(); //触发结果()上的模糊,即使不使用自动填充
});

We are using the autocomplete jquery plugin written by Jörn Zaefferer, and are trying to verify a valid option is entered.

The plugin has result() event which fires when a selection is made. This is OK, but I need to check the value in the textbox when a user clicks out too. So we have tried a .change() and .blur() events, but they both pose an issue: when you click on an entry in the results div (the 'suggest' list) the .change() and .blur() events fire, and this is before the plugin has written a value to the textbox, so there is nothing to verify at this point.

Could someone help me configure events so whenever someone clicks away, but not in the results box I can check for a valid value in the box. If this is the wrong approach please inform me of the correct one. We originally went with this plugin because of its 'mustMatch' option. This option doesn't seem to work in all cases. Many times a valid entry will be written into the textbox and than cleared by the plugin as invalid, I have not been able to determin why.

Basic Code example:

<html>
<head>
<title>Choose Favorite</title>
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script>
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script>
<script>
    $(".suggest").autocomplete("fetchNames.asp", {
        matchContains:false,
        minChars:1, 
        autoFill:false,
        mustMatch:false,
        cacheLength:20,
        max:20
    });

    $(".suggest").result(function(event, data, formatted) {
        var u = this;
        // Check value here

    });

    /* OR */

    $(".suggest").change(function(me) {
        //check value here
    });

</script>
</head>
<body>
    <label for="tbxName">Select name (I show 10):</label><br />
    <INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br />
</body>
</html>

I think rather than writing your own function to verify if the data matches, you can just call search(). If result() is called with a null data parameter, then you know that auto-complete wasn't used and by calling search() on blur, you're guaranteed to get result() called at least once.

I've posted this code for a similar question, it may help here as well.

autocompleteField.result(function(event, data, formatted) {
    if (data) {
        //auto-complete matched
        //NB: this might get called twice, but that's okay
    }
    else {
        //must have been triggered by search() below
        //there was no match
    }
});

autocompleteField.blur(function(){
    autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used
});