CODEWITHSUNDEEP
javascriptjqueryajaxjquery-uijquery-ui-autocomplete
Stackz
Stackz

Reputation: 15

How to implement jquery auto complete multiple values

I have already implemented jquery autocomplete in this Blog

Now i need to achieve multiple values. I have seen This to way of implementing the multiple values.

The below is the code which i have used to implement jquery autocomplete.

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

Upvotes: 0

Views: 2805

Answers (1)

Deep
Deep

Reputation: 9804

try like this for multi-value autocomplete

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

<link rel="stylesheet"   href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
var selectedItemUrls = [];
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}

$(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: function( request, response ) {
      response( $.ui.autocomplete.filter(
        source, extractLast( request.term ) ) );
    },
    focus: function() {
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      terms.pop();
      terms.push( ui.item.value );
      terms.push( "" );
      this.value = terms.join( ", " );
      selectedItemUrls.push(ui.item.url);
      return false;
     }
    });

    });

    function SearchItem(e){

     if(selectedItemUrls.length > 0)
     {

     for(var i = 0; i< selectedItemUrls.length; i++)
     {
      window.open(selectedItemUrls[i]);
     }
     }
     else
     {
      alert("select something to search");
     }
     }
     }
   </script>
   </head>
   <body>
   <input id="autocomplete" />
   <button onclick='SearchItem()'>
    Search
   </button>

   </body>
   </html>

Plunker : http://plnkr.co/edit/6GaJRfPqshXBGkFln3rD?p=preview

Upvotes: 1

Related Questions