Friday, January 31, 2020

Autocomplete using jquery javascript snippet



//please correct the angular brackets
<  link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<  script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
<  script src="http://code.jquery.com/jquery-1.9.1.js">

< script  >
  $(function() {
var contentvalues=[{"state":"AL","value":"Autauga","zipcode":"36003","county":"01001"},{"state":"AL","value":"Baldwin","zipcode":"36507","county":"01003"}]

var jsonObj = [];
$.each(contentvalues, function(index) {
        item = {}
        item ["state"] = contentvalues[index].state;
        item ["value"] = contentvalues[index].value + ' - ' + contentvalues[index].state;
        item ["zipcode"] = contentvalues[index].zipcode;
        item ["county"]= contentvalues[index].county;
        item ["countyname"]= contentvalues[index].value;
        jsonObj.push(item);

    });



    $( "#searchbox" ).autocomplete({
      minLength: 3,
      source: jsonObj,
      focus: function( event, ui ) {
        $( "#searchbox" ).val( ui.item.value  );
        return false;
      },

      select: function( event, ui ) {
var state=ui.item.state;
var county=ui.item.county;
var zipcode=ui.item.zipcode;
var countyname=ui.item.countyname;

       var url='https://www.yoursite.com/?state=' +  state + '&countyname=' + countyname + '&zipcode='+ zipcode + '&county=' + county;
   window.location.href = url;
        return false;

      }

  });
  });

</  script >

< form action="search" method="post" >
< input  name="searchbox" id="searchbox"   />
<   /form   >

No comments: