Javascript 停止将“无结果”标签添加到输入以及输入是否与标签匹配

我已经创建了一个自动完成输入，它工作得很好，但我想扩展它，使它更好。但这是一场与我有限的jQueryUI知识的斗争，尽管有一些尝试和错误，我似乎无法解决两个问题

我想解决的第一个问题是使noresult标签不可选择，这意味着它不能添加到focus或select输入中

我想这样做，如果用户在输入框中输入的内容与标签值匹配，但他们出于某种原因没有选择它，那么当他们按下我表单上的提交按钮时，匹配的标签被选择并因此输入

以下是我到目前为止的情况：

html:

JS:

---

以下是如何禁用选择项的示例：

这个例子有点复杂，因为我们在自动完成小部件中访问菜单小部件。对于您的代码，可以使用类似的方法：

$("#sl").autocomplete("widget").menu("option", "items", "> li:not('.no-select')");

小部件

返回包含菜单元素的jQuery对象。尽管菜单项是不断创建和销毁的，但菜单元素本身是在初始化过程中创建的，并不断重复使用

这涉及第1点

到地址2，如果用户没有进行选择，则需要考虑假设选择的逻辑。例如，如果用户键入l并得到10个结果，甚至只有2个结果。。。您为用户选择哪一个？此外，如果用户已离开该字段，autoselect将关闭其菜单并销毁结果

在我看来，最好检查隐藏字段，如果它们是空的，则阻止提交表单，并强制用户选择一个选项，使其成为必填字段

$function{ var国家=[{ 国家：1， 国名：英国， 标签：伦敦， 价值：1 }, { 国家：1， 国名：英国， 标签：曼彻斯特， 价值：2 }]; $'sl'。自动完成{ 资料来源：国家， 选择：functionevent，ui{ 违约事件； 如果ui.item.label==未找到结果{ $sl.val； 返回false； } $country.valui.item.country；//将所选id保存到隐藏输入 $city.valui.item.value；//将所选id保存到隐藏输入 $'sl'.valui.item.label+'，'+ui.item.countryname }, 焦点：functionevent，ui{ 违约事件； $'sl'.valui.item.label； }, 响应：functionevent，ui{ if！ui.content.length{ var noResult={ 值：， 标签：“未找到结果” }; ui.content.pushnoResult； } } }; $sl.autocompletewidget.menu选项，项，>li:not'.no select'； $sl.autocompleteinstance.\u renderItem=functional，项目{ var li=$； 如果item.country==未定义{ li.addClassno-select.appenditem.label； }否则{ li.append+item.label+，+item.countryname+； } 返回li.appendToul； } $form.submitFunction{ e、 防止违约； console.log$this.serialize； 如果$country.val==| |$city.val=={ $sl.focus； 返回false； } 返回true； }; }; *必需的 寻找团队

---

非常感谢你提出问题一的建议。关于第二个问题，我真正想要的是，如果输入匹配完整的单词，例如，如果有人键入输入，但没有单击或选择标签并按submit，则提交时的值当前为空，因此，我只想在完整输入与标签匹配时添加这些值，但由于某些原因，用户没有单击标签。因此，如果用户未单击标签进入巴黎，则当按下提交按钮时，匹配的标签将单击并send@detinu20然后，您需要执行一个可以执行的模糊回调这就是逻辑$sl.blur函数{}；好啊反思一下，您最初为问题2发布的想法效果很好，我将如何添加该想法，并在单击提交按钮时显示“无结果匹配”标签？@detinu20我的示例已经显示了您可以在提交回调中解决的一种方法。如果这回答了您的问题，请继续并标记它。编写代码，如果需要，发布另一个问题。

   public function autoComplete(Request $request){

        $query = $request->term;
        $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);
        foreach($res as $cities ){
            $usersArray[] = array(
                "label" => $cities->name,
                "value" => $cities->id,
                "country" => $cities->countries->id,
                "countryname" => $cities->countries->country

            );
        }
        return response()->json($usersArray);
    }

$('#sl').autocomplete({
    source: '/autocomplete',
    select: function(event, ui) {
        event.preventDefault();
        $("#country").val(ui.item.country); // save selected id to hidden input
        $("#city").val(ui.item.value); // save selected id to hidden input
        $('#sl').val(ui.item.label +', '+ ui.item.countryname)

    },
    focus: function(event, ui){

        event.preventDefault();
        $('#sl').val(ui.item.label+', '+ui.item.countryname);

    },
    response: function(event, ui) {
        if (!ui.content.length) {
        var noResult = { value:"",label:'No results found', countryname:""  };
        ui.content.push(noResult);

    }
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
    var li = $("<li>");
    if (item.country == undefined) {
        li.append("<div>" + item.label +"</div>");
    } else {
        li.append("<div><strong>" + item.label + "</strong>, " + item.countryname + "</div>");
    }
    return li.appendTo(ul);
};

$("#sl").autocomplete("widget").menu("option", "items", "> li:not('.no-select')");