I am creating some auto-complete code to list countries from a JSON array. It works fine, but with an error in console. I don't know when it will be harmful. Please can you help to solve this?
CSS
.mainpart {
width:100%;
height:auto;
}
.first {
width:150px;
height:25px;
float:left
}
.second {
width:150px;
height:25px;
float:left
}
ul, li {
list-style:none;
}
.li-autoList {
background-color:#CBCACC;
border:1px solid #fff;
cursor:pointer;
}
HTML
<div class="mainpart">
<div class="first">
<input type="text" id="county" onclick="autoList('#county','country')" />
</div>
<div class="second">
<input type="text" id="county2" onclick="autoList('#county2','city')" />
</div>
</div>
JS
<script type="text/javascript">
function autoSort(id,list){
if(list=='country'){
county=(co.response.data);
}else{
county=(ci.response.data);
}
li='';
for(i=0;i<county.length;i++){
c=$(id).val().toUpperCase().replace(/["'\(\)]/g, "");
conDec=county[i].description+'('+county[i].cod+')';
conDec=conDec.toUpperCase().replace(/["'\(\)]/g, "");
n=(conDec.search(c));
if(n>=0){
cname=county[i].description+'('+county[i].cod+')';
li+='<li class="li-autoList"><input type="checkbox" class="itm" value="'+county[i].description+'('+county[i].cod+')">'+county[i].description+'</li>';
}
}
$('.li-autoList').remove();
$(id).after(li);
}
function autoList(id,list){
if(list=='country'){
county=(co.response.data);
}else{
county=(ci.response.data);
}
li='';
for(i=0;i<county.length;i++){
c=$(id).val().toUpperCase().replace(/["'\(\)]/g, "");
conDec=county[i].description+'('+county[i].cod+')';
conDec=conDec.toUpperCase().replace(/["'\(\)]/g, "");
n=(conDec.search(c));
chk='';
if(conDec==c){
chk='checked';
}
cname=county[i].description+'('+county[i].cod+')';
li+='<li class="li-autoList liItm"><input type="checkbox" '+chk+' class="itm" value="'+county[i].description+'('+county[i].cod+')">'+county[i].description+'</li>';
}
$('.li-autoList').remove();
$(id).after(li);
$('.itm').click(function(){ $(id).val( $(this).val());
$('.li-autoList').remove();
// autoList(id,list);
});
$('.liItm').click(function(){
// $(id).val( $(this).val());
var cb = $(this).find(":checkbox")[0];
$(id).attr('checked',true);
$(id).val( $(cb).val());
$('.li-autoList').remove();
// autoList(id,list);
});
$(id).bind({
'keyup': function() {
$('.itm').removeAttr('checked');
autoSort(id,list)
},
blur: function() {
//if checkbox checked
if(!$('.itm').attr('checked'&&( $(id).val()==''))){
$(id).val(null);
autoList(id,list)
}
}
});
}
var ci={"response":{"status":"0", "data":[{"cod":"SLST" ,"description":"San Luis Talpa" , "group":"SV"},{"cod":"SA6" ,"description":"San Salvador" , "group":"SV"}]}};
var co={"response":{"status":"0", "data":[{"cod":"FR-AG" ,"description":"Agay" , "group":"Altro"},{"cod":"FR-AI" ,"description":"Aix En Provence" , "group":"Altro"},{"cod":"AL" ,"description":"Albania" , "group":"Le più cliccate"},{"cod":"DZ" ,"description":"Algeria" , "group":"Altro"},{"cod":"FR-AM" ,"description":"Amiens" , "group":"Altro"},{"cod":"AD" ,"description":"Andorra" , "group":"Altro"},{"cod":"ZW" ,"description":"Zimbabwe" , "group":"Altro"}]}};
</script>
</body>