Question

我正在开发一个网站，我正在使用jquery ui自动完成插件使用搜索栏。

但是，现在仅在从下拉菜单中选择后，仅适用于键盘Enter和鼠标单击。我还放置了一个搜索按钮，但是单击按钮时下拉菜单关闭，并且没有重定向或发生任何事情。

jQuery：

$(function() {
    $( "#searchbox" ).autocomplete({
        source: url + 'Home/searchallresults_shop',
        autoFocus:true,
        select: function( event, ui ) {
            $( "#searchallresults_shop" ).val( ui.item.name );
            console.log(ui);
            window.location.href = ui.item.url;
        }
    });
});

HTML：

<input type="text"  name="searchbox" id="searchbox">
<button type="submit" id="searchbutton_jq">Search</button>

如何使搜索按钮选择第一个自动完成项并重定向？

谢谢。

Answer 1

不清楚您在说什么。我认为您的意思是，当结果项具有焦点时，您希望该字段填充一个字段，以便用户可以单击“搜索”按钮，而不是按 Enter 或单击结果。我只是不确定这会多久发生一次。

考虑以下代码：

var myData = [{
    value: "jquery",
    label: "jQuery",
    url: "https://jquery.com/"
  },
  {
    value: "jquery-ui",
    label: "jQuery UI",
    url: "https://jqueryui.com/"
  },
  {
    value: "sizzlejs",
    label: "Sizzle JS",
    url: "https://sizzlejs.com/"
  }
];
$(function() {
  function redirect(u) {
    window.location.href = u;
  }
  $("#searchbox").autocomplete({
    source: myData,
    autoFocus: true,
    select: function(e, ui) {
      $("#searchallresults_shop").val(ui.item.label);
      $("#searchbutton_jq").data("url", ui.item.url);
      return false;
    },
    focus: function(e, ui) {
      $("#searchallresults_shop").val(ui.item.label);
      $("#searchbutton_jq").data("url", ui.item.url);
      return false;
    }
  });
  $("#searchbutton_jq").click(function() {
    if ($(this).data("url") != undefined) {
      redirect($(this).data("url"));
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="searchbox" id="searchbox" />
<button type="submit" id="searchbutton_jq"> Search
  </button>
<br /> Shop: <input type="text" id="searchallresults_shop" />

如果其中一项具有focus，我们可以使用回调执行一些操作。如果持续关注并且用户单击“搜索”，则会发生预期的重定向。如果他们选择一个项目，则相同。请记住，blur也可能会触发select。单击该按钮将触发一个blur事件，因此尚不清楚哪个在顶部冒泡，因为它们都在做同样的事情。

如何在jQuery UI自动完成中使用搜索按钮？

1 个答案: