jQuery自动完成问题-如果用户未明确选择，则不匹配 [英] jQuery autocomplete problem - doesn't match if user doesn't specifically select

问题描述

以下是我之前的两个问题:

Following on from my previous two questions:

如何在用户点击提交时使jQuery自动完成执行search()

如何将输入修剪到JQuery自动完成框?

我的表单中有一个jQuery UI 1.8自动完成框，并且在大多数情况下，它就像一种魅力.我遇到的一个问题是，如果输入有效的名称，但不选择显示的选项，则该名称永远不会与我的{name,value}列表匹配，因此隐藏的正确值未设置包含值"部分的输入.当然，这会导致令人困惑的情况，即您可以输入一个您知道正确的名称，然后单击提交"，并被告知您尚未输入正确的名称(因为该值是null).

I have a jQuery UI 1.8 autocomplete box in my form, and for the most part it works like a charm. The one problem I have is that if I enter a valid name, but do not select the choice that appears, then the name is never matched against my {name,value} list and so the correct value for the hidden input that contains the 'value' part is not set. This of course causes the confusing situation where one can enter a name you know is correct, hit submit and be told you haven't entered a correct name (as the value is null).

即使用户未从自动完成框中进行选择，我如何确保设置了隐藏的输入值?我可以将某些功能绑定到提交"按钮的onclick事件上，从而使jQuery使用框中的内容进行搜索并自动选择第一个选项吗?或者，我可以做到这一点，以便当用户以任何方式(返回/制表键/单击关闭/等)取消选择输入框时，自动完成功能将选择第一个选项吗?

How can I make sure that the hidden input value is set even if the user doesn't make a choice from the autocomplete box? Is there some function I can tie to the onclick event of the submit button which would make jQuery do a search with what is in the box and automatically select the first option? Alternatively, can I make it so that the autocomplete will select the first option when the user deselects the input box in any way (return/tab/click off/etc)?

谢谢.

推荐答案

这是我为您解决的问题的解决方案.我刚刚添加了有关 change 事件的部分. 希望对您有帮助.

Here is my solution to your problem. I just added the part regarding the change event. I hope it helps.

jQuery(function(){
    jQuery('#Resource').autocomplete({
        source: data,
        focus: function(event, ui) {
            jQuery('#Resource').val(ui.item.label);
            return false;
        },          
        select: function(event, ui) {
            jQuery('#Resource').val(ui.item.label);
            jQuery('#EmployeeNumber').val(ui.item.value);
            return false;
        },
        change: function(event,ui){
                for (var i in data){
                    if (data[i].label==jQuery('#Resource').val()){
                        jQuery('#EmployeeNumber').val(data[i].value);
                    }
                }
        }
    });
}); 

这篇关于jQuery自动完成问题-如果用户未明确选择，则不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！