Question

我有一个使用jQuery自动完成功能进行搜索的文本框。当我在文本框中输入内容时，它会显示未选择任何内容的建议。

我发现现在不支持 selectFirst：true 。如果我在下拉列表中选择一个项目并按回车键，则说明工作正常。

问题在于，如果用户输入苹果的应用并按下回车键，则会尝试使用应用提交表单。该表单只能与下拉列表中的一个值一起提交。

我尝试在按Enter键时禁用表单提交，以便我可以从JavaScript提交表单但无法找到解决方案。

这是我的代码：

$("#searchtext").autocomplete({
    source: path + 'autocompletesearch?category=' + $("select[name='category'] option:selected").val(), 
    width: '500px', 
    matchContains: true, 
    select: function(event, ui){
        $(".searchform").attr("action", path + "fullproductinfo/" + ui.item.id);
        $("input[name='searchid']").val(ui.item.value);
        $(".searchform").submit();
    }
});

我的表格：

        <form method="post" action="search" class="searchform">
            <div class="searchdiv">
                <input type="text" id="searchtext" name="searchtext"
                    placeholder="Search a product or a brand" autocomplete="off"/>
            </div>
            <div class="searchbutton">
                <input type="button" name="btnsearchproduct" value="Search" />
            </div>
            <div class="clear"></div>
        </form>

请注意，有<input type='button'而不是'提交'，因此默认输入按下不应该适用于表单。这是自动填充，我猜是在提交时提交表单。

Answer 1

如果您使用此功能：http://jqueryui.com/autocomplete/

然后，您想要第一个项目autoFocus，您现在可以使用该选项：

$( ".selector" ).autocomplete({ autoFocus: true });

文档中提到：http://api.jqueryui.com/autocomplete/

修改

由于您输入了密钥问题，因此可以尝试这样：

$(".selector").keydown(function(event){ if(event.keyCode == 13) { if($(".selector").val().length==0) { event.preventDefault(); return false; } } });

Answer 2

如果您使用jquery ui进行自动完成，您只需指定autoFocus：true选项。

它将自动选择第一个结果，当按下回车键时，它将使用第一个结果。

$( ".selector" ).autocomplete({
  autoFocus: true,
  source: function (request, response) {
    //your code
  },
  select: function(event, ui) {
    //your code
  }
});

Answer 3

我有类似的问题＆amp;这是我解决它的方式

if ($(".selector").val().length > 0) {
var options = $(".selector").autocomplete("option");
var fromAutocomplete = false;

jQuery.each(options.source, function(index, device) {
if ($(".selector").val() == options.source[index]) {
    fromAutocomplete = true;
}
});

if (!fromAutocomplete) {
$(".selector").val("");
    $(".selector").attr("disabled", false);
    return false;
}
}

jQuery自动完成输入密钥问题

3 个答案: