code for inline search

Step 1 : In JSP Need to place the below mentioned code

Note : In this code snippet i have placed autocomplete="false" to avoid autofill chrome settings

<div id="areadiv">

<input type='text' autocomplete="off" id='area' name='area' placeholder='Enter Area' style='width:96%;margin-left:5px;height:40px;border: 2px solid #CCC;font-size:14px;    font-weight: 600;font-family: ;border-radius: 4px 4px 4px 4px;background:white url(/tyres/images/searchhome.png) no-repeat 365px 9px;  padding-left:20px;' maxlength='50' onkeyup="getinlinesearch(event,'onkeyup');"><input autocomplete="false" class="enter_email_input"  name="whereever6" id="location6" placeholder="Enter Your City.." type="text" onkeyup="displayinlinewherever('caraccessories');" style='display:none;'></div>

Step 2 : To get area details need to place respective inline search function in before select drop down menu(i.e, city) as mentioned below

<select name="city" id ="city" class="drop_dn_tyres" onchange="getinlinesearch(event,'onchange');">  

    <option  value="0" >Select&nbsp;City</option>

   </select>

Step 3 : Include below mentioned js and css files

<link rel="stylesheet" href="/../css/jquery-ui.css">

<script src="/../js/jquery-ui.js"></script>

Step 4: Place the below mentioned css code in style

.dialog{width:100%;font: 12px/22px ; text-align:center;    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;position:absolute;padding: 1px;display: none;z-index:9999; background: #232323;}

.ui-autocomplete

{

    position: absolute;

    cursor: default;

    height: 200px;

    overflow-y: scroll;

    overflow-x: hidden;

}

.ui-autocomplete .highlight {

   text-decoration: underline;

  }

.highlight {

   width: 159px;

    border-style: dotted;

    border-color: #cccccc;

  }

Step 5: Javascript Function

var newitems;

 function getinlinesearch(event,keytype)

  {

   //alert("inside");

  

   var city=document.getElementById("city").value;

   // alert(city);

  

   var i;

   var items="";

  

    i=$("#area");

    //document.index.searchward.style.background = 'url(/myvillage/images/searchhome.png) no-repeat 209px 9px';

  

   var val=i.val();

   /*code to high light autocomplete*/

   $.ajaxSetup({ cache: false });

   $.ui.autocomplete.prototype._renderItem = function (ul, item)

   {

    var term = this.term.split(' ').join('|');

    var re = new RegExp("(" + term + ")", "gi");   

    var itemlabel=item.label;

    var results=itemlabel.split("--");

    var value1=results[0];

    var value2=results[1];

    var t = itemlabel.replace(re, "<b>$1</b>");

    //var t1=t+" -- "+value2;

    return $("<li></li>")

    .data("item.autocomplete", item)

    .append("<a>" + t + "</a>")

    .appendTo(ul);

   };

   var vallength=val.length;

   if(vallength==0)

     {

     

    // Get the input element and its value

    document.getElementById("area").style.background = 'url(/tyres/images/searchhome.png) no-repeat 365px 9px';

     

     }

   //alert(keytype);

   if(keytype=="onchange")

   {

     /*$city = $('#city');

     var splitvalcity =$city.val(); 

     alert(splitvalb);

      if(splitvalcity=="default")

     {

      //alert("1");

      //$('#city').addClass('highlightbefore');

      //$('#city').removeClass('highlightafter');

      document.getElementById("city").focus();

     }

     else

     {

      //alert("2");

      //$('#city').removeClass('highlightbefore');

      //$('#city').addClass('highlightafter');

      document.getElementById("city").focus();

     }*/

   

     //window.scrollTo(0,document.body.scrollHeight);

     i.autocomplete({source: []});

     i.autocomplete("destroy");

     newitems="";

     $.get("./servlet/InlineSearch?city="+city+"&keyword="+onchange+"",function(data)

      {

       //alert("data :" +data);

       // Get each item separated by new line

       newitems=data.split("\n");

       //alert(newitems);

      document.getElementById("area").focus();

      //$('#corner').hide();

      //window.scrollTo(0, 150);

      });

   }

   else

   { 

     //$('#corner').hide();

    

     //alert("newsitems :" +newitems);

     // put those items in autocomplete! That's it!

     i.autocomplete({ width: 300,

     max: 10,

     delay: 100,

     minLength:2,

     autoFocus: true,

     cacheLength:1,

     scroll: true,

     highlight: true,

     source:newitems,

     select: function (event, ui, icon)

     {

      var charCode = (event.which) ? event.which : event.keyCode

      if(charCode==13)

      {

       i.css("background", "");

      

      }

     

       i.css("background", "none");

     

      /* do stuff with selection*/

      //alert("s");

       //window.location.hash = '#findbatterybutton';

      //window.scrollTo(0,document.body.scrollHeight);

      //$('#corner').show();

      //$('#findbatterybutton').addClass('highlight');

      //document.getElementById("focusable").focus();

       //$("#findbatterybutton").focus();

     },

     close: function ()

     {

     

       //this.value='';

       /* OR $(this).val('')*/

     }

     });

       

   }

}

Step 6: Method in Servlet

String s =  (req.getParameter("com") != null) ? (req.getParameter("com")) : "";

    LogLevel.DEBUG(5,new Throwable(),"s :"+s);

    String city =  (req.getParameter("city") != null) ? (req.getParameter("city")) : "";

    LogLevel.DEBUG(5,new Throwable(),"city :"+city);

  

    String keyword =  (req.getParameter("keyword") != null) ? (req.getParameter("keyword")) : "";

    LogLevel.DEBUG(5,new Throwable(),"keyword :"+keyword);

    Vector panchayatnamevector = new Vector();

   

    String panchayatname="select distinct(area) from location_area where location='"+city+"' order by area asc";

    LogLevel.DEBUG(5,new Throwable(),"panchayatname :"+panchayatname);

    panchayatnamevector=qm.executeQuery(panchayatname);

    

    LogLevel.DEBUG(5,new Throwable(),"panchayatnamevector :"+panchayatnamevector);

    String strRes="";

    ArrayList<String> as=new ArrayList<String>();

    s=s.toLowerCase();

    for(int j=0; j<panchayatnamevector.size();j++)

    {  

     Hashtable panchayatht=(Hashtable)panchayatnamevector.get(j);

     String area=String.valueOf(panchayatht.get("area"));

     LogLevel.DEBUG(5,new Throwable(),"area:"+area);

     String arealower=area.toLowerCase();

     LogLevel.DEBUG(5,new Throwable(),"arealower :"+arealower);

    

      if(keyword.equals("onchange"))

      {

       as.add(area);

      }

      else

      {

       if(arealower.startsWith(s))

       {

        LogLevel.DEBUG(5,new Throwable(),"if :"+arealower);      

        as.add(area);      

       }

      }

    

    }

    LogLevel.DEBUG(5,new Throwable(),"as:"+as);

  

    for(String st:as)

    {    

      out.println(st);    

    }

    out.close();

 }