Stackz Stackz - 5 months ago 12
Ajax Question

How To add duplicate search box to jquery autocomplete

In This blog i have created sucessfully jquery autocomplete with search button sucessfully. But i want just like This

My searchbox aim to select tags-> redirect to another page..

my problem is i want to add one more search box with one button only i mean search fields i mean search areas should be 2 with same links and i mean i modify the links like zipcode links and city links later but i presently need one search button with multiple search areas i hope my question is clear and the above is my code



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

Try this one

Whole code

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