Question

我的jquery知识有限，我的大部分编码能力都是自我思考的。如果我的问题对于经验丰富的职业选手来说太简单了，请原谅。

也就是说，我正在开发一个药物参考网页，用户可以在一个名为#drugs的输入框中输入药物名称。

如果找到匹配项，＃submit1.click函数会将用户发送到匹配药物页面。我能够通过使用从其他用户复制的.focus和.select代码来获得链接工作（尽管我很少理解它是如何工作的。）

我的问题是，无论如何我都可以向用户添加警告消息，如果用户输入的药品名称不在来源中，则网页将

提醒用户该药物不存在。
单击警报后，将光标放回输入#drugs字段。

谢谢。我的所有脚本都在客户端运行。我对服务器端脚本没有任何了解。

$(document).ready(function(){

var html = ".html";

$("#drugs").autocomplete({
    source: [
        {label: "Tylenol", value: "Acetaminophen"},
        {label: "Acetaminophen", value: "Acetaminophen"},
        {label: "Adenocard", value: "Adenosine"}
    ],
    minLength: 2,
    focus: function( event, ui ) {
        $( "#drugs" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#drugs" ).val( ui.item.label );
        $( "#drugs" ).attr("data-value",ui.item.value);
    return false;
  }

});

$('#submit1').click(function(){
    var selection = $( "#drugs" ).attr("data-value");
    var url = "../Regimens/" + selection +html;
    window.location.href= url;
    return false;
});
});

Answer 1

您需要做的是在submit1点击上遍历自动填充选项列表。您的点击绑定将变为：

$('#submit1').click(function(){
    var itemFound = false;
    var $drugs = $('#drugs');
    var list = $drugs.data('uiAutocomplete').options.source;
    var selection = $drugs.val();

    for (var key in list) {
        if (list[key].label.toLowerCase() === selection.toLowerCase()) {
            //console.log("Item found");
            itemFound = true;
        }
    }

    if (itemFound) {
        var url = "../Regimens/" + selection +html;
        window.location.href= url;
    } else {
        alert(selection+" not found");
        $drugs.focus();
    }
    return false;
});

编辑：至于它是如何工作的，这里有一个解释：

有一个特殊的HTML元素属性（类似于ID，类和样式），格式为data-*="value"。此属性允许Javascript存储和检索数据。更多信息：https://api.jquery.com/jquery.data/。一个例子是将最后输入的值存储在输入元素中。 HTML如下：

<input type="text" id="foo" data-last_entered_value="bar" />

这可以通过简单的Javascript检索：

document.getElementById('foo').dataset['last_entered_value'];

或jQuery：

$('#foo').data('last_entered_value');

这两个都会返回bar作为值。您还可以存储/更改数据属性，它将在脚本范围内可用于DOM中元素的生命周期。您可以使用jQuery更改它：

$('#foo').data('last_entered_value', 'baz');

现在数据属性的强大之处在于能够存储任何类型的Javascript变量（我知道）。因此，您只需传递对象即可存储对象。这些将保留其引用并可以动态更新。我现在不会谈到这一点，但随着你的知识增加，你可以继续阅读它。

要点：当您使input#drugs元素成为自动完成时，自动完成插件会在所述元素的数据attr中添加对自身的引用。这样您就可以在初始化后访问该插件。

我正在做的是利用我的优势并获得您最初传递给自动完成功能的options。在传递的options中，您使用source填充了label: value对象（例如{“Tylenol”：“Acetaminophen”}）。

一旦我有一个有效值数组要检查，我做了一个for循环来迭代所有这些选项对。在这种特殊情况下，我们可以通过这种方式完成for循环：

for (var key = 0; key < list.length; key++) {

在遍历列表时，我进行字符串比较以检查用户是否输入了有效选项（我将两边都转换为小写，这样即使情况不对，它也能正确匹配输入匹配）。

如果自动填充无法找到匹配项，则会显示警报消息

1 个答案: