如何将搜索按钮添加到 Jquery 自动完成

Question

This 是我的博客。

这是代码

<!doctype html>
Jquery Auto Complete

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
    source: [
             { value: "NYC", url: 'http://www.nyc.com' }, 
             { value: "LA", url: 'http://www.la.com' },
             { value: "Philly", url: 'http://www.philly.com' },
             { value: "Chitown", url: 'http://www.chitown.com' },
             { value: "DC", url: 'http://www.washingtondc.com' },
             { value: "SF", url: 'http://www.sanfran.com' },
             { value: "Peru", url: 'http://www.peru.com' }
        ],
        select: function (event, ui) {
            window.location = ui.item.url;
        }

});
  });
  </script>



<input id="autocomplete" />


</!doctype>

现在，当用户搜索查询 NYC 并选择它时，它会重定向到 url，但我的目标是在用户单击搜索按钮时将搜索按钮放在旁边，然后它应该被重定向。我希望我的问题很清楚提前谢谢。

Answer 1

完整更新代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
var selectedItemUrl = "";
$(function() {

  var source = [{
    value: "NYC",
    url: 'http://www.nyc.com'
  }, {
    value: "LA",
    url: 'http://www.la.com'
  }, {
    value: "Philly",
    url: 'http://www.philly.com'
  }, {
    value: "Chitown",
    url: 'http://www.chitown.com'
  }, {
    value: "DC",
    url: 'http://www.washingtondc.com'
  }, {
    value: "SF",
    url: 'http://www.sanfran.com'
  }, {
    value: "Peru",
    url: 'http://www.peru.com'
  }];

  $("#autocomplete").autocomplete({
    minLength: 0,
    source: source,
    select: function(event, ui) {
      selectedItemUrl = ui.item.url
    }
  })

});

function SearchItem(e){
if(selectedItemUrl!="")
    window.location=selectedItemUrl
    else
    alert("select something to search")

}


</script>


</head>
<body>
<input id="autocomplete" />
<button onclick='SearchItem()'>
Search
</button>

</body>
</html>

如果现在对您有帮助，请标记为答案:0 ,:)

如何将搜索按钮添加到 Jquery 自动完成

How To Add Search Button To Jquery Autocomplete

javascript

jquery

button

jquery-plugins