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 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();
}