如果自动完成找不到匹配项，则发出警报消息

Question

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

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

如果找到匹配项，#submit1.click 函数会将用户发送到匹配药物页面。通过使用从其他用户复制的 .focus 和 .select 代码，我能够使 link 工作（尽管我对它的工作原理知之甚少。）

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

提醒用户该药物不存在。
单击警报后，将光标放回输入#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、class 和样式），其格式为 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');

这两个都将returnbar作为一个值。您还可以 store/change 一个数据属性，它将在 DOM 中的元素的生命周期内在脚本范围内可用。您可以使用 jQuery 更改它：

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

现在数据属性的强大之处在于它能够存储任何类型的 Javascript 变量（据我所知）。所以你可以通过简单地传递对象来存储对象。这些将保留它们的引用并可以动态更新。我现在不会深入讨论，但是随着您知识的增加，您可以进一步阅读它。

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

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

一旦我有了一组要检查的有效值，我就执行了一个 for 循环来遍历所有这些选项对。在这种特殊情况下，我们也可以这样完成 for 循环：

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

在遍历列表时，我进行了字符串比较以检查用户是否输入了有效选项（我将两边都转换为小写以便即使大小写不正确也能正确匹配输入't mAtCh).

如果自动完成找不到匹配项，则发出警报消息

Alert message if Autocomplete cannot find a match

jquery

alert

autocomplete

jquery-autocomplete