如何将重复的搜索框添加到jquery自动完成答案

【问题标题】：How To add duplicate search box to jquery autocomplete如何将重复的搜索框添加到jquery自动完成
【发布时间】：2016-06-28 06:01:43
【问题描述】：

在This 博客中，我成功创建了带有搜索按钮的jquery 自动完成功能。但我想要This

我的搜索框旨在选择标签-> 重定向到另一个页面..

我的问题是我想用一个按钮再添加一个搜索框我的意思是搜索字段我的意思是搜索区域应该是 2 个具有相同链接的链接，我的意思是我稍后会修改邮政编码链接和城市链接等链接，但我目前需要一个带有多个搜索区域的搜索按钮我希望我的问题很清楚，上面是我的代码

   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 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>
<input id="autocomplete" />
<button onclick='SearchItem()'>search

【问题讨论】：

不清楚你到底想达到什么目的
像这样indeed.co.in 我只需要一个带有不同搜索字段的按钮我已经添加了一个带有一个按钮的搜索字段，但无法添加另一个带有链接的搜索字段，如上所述跨度>
你不应该从JS打开多个链接，它很容易被最终用户浏览器阻止。
我的目标是向多个框添加多个链接，而不是从js添加对......？

标签： javascript jquery html ajax jquery-ui

【解决方案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 selectedItemUrl1=null
  var selectedItemUrl2=null

     $(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'
    }];

    var source2 = [ {
        value: "LA",
        url: 'http://www.la.com'
    }];

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

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

});

function SearchItem(e) {
    if (selectedItemUrl1.indexOf("http") != -1 && selectedItemUrl2.indexOf("http") != -1) {
        if (selectedItemUrl1 != "" && selectedItemUrl2 != "") {
            $("#output").append("<div ><object style='heigth:600px;width:600px;float:left' data='" + selectedItemUrl1 + "'/></div>");
            $("#output").append("<div ><object style='heigth:600px;width:600px;float:left' data='" + selectedItemUrl2 + "'/></div>");


        }
    }

}

</head>
<body>
    <input id="autocomplete" />
    <input id="autocomplete2" />
    <button onclick='SearchItem()'>search</button>
<div id="output"></div>
</body>
</html>

【讨论】：

已添加但无法获取jquerytest2.blogspot.in@patilprashant6792
选择后点击搜索框时搜索框没有响应，请查看jquerytest2.blogspot.in@patilprashant6792
它在另一个窗口中弹出，但可以在同一个窗口中生成........？
你想如何在同一个窗口中打开多个 URL？有什么想法吗？？
patilprashant 你不明白我你知道博客点的标签我们可以在同一个窗口中显示多个标签