Question

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

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

我的问题是我想再添加一个带一个按钮的搜索框我的意思是搜索字段我的意思是搜索区域应该是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

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 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>

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

1 个答案: