I want to show the values in the array on the page and give a input box to take keyword as input and based on the filtering, i want to change the content...
here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Ahmet YUCEL" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<title>Untitled 2</title>
</head>
<body>
<input type="text" id="input_element_id" name="input_element_id"/>
<?php
$all_elms=array("439399343"=>"Anshul Singhal","3439493943"=>"Mayank","343949398438"=>"ankit","34839849839"=>"shivank","3843884384"=>"dheeraj","383849839"=>"sparrow","8348399219"=>"makar makru","43891928382"=>"lying dehhhee");
echo json_encode($all_elms);
?>
<div id="user"></div>
</body>
<script type="text/javascript">
$('#input_element_id').keydown(function() {
val = $(this).val();
$(all_elms).each(function(){
if(this.search(val) >= -1) $("#user-" + this).show();
});
});
</script>
</html>
try following: echo your list in "li" format, and then copy paste below code to your editor
// on keydown on text box
$txtInput.on("keyup", function (e) {
var txt = $(this).val().toLowerCase();
//for backspace
if (e.which == 8) {
if (txt.length == 0) {
renderList(arrText);
}
}
if (txt.length >= 1) {
var filterList = searchInList(arrText, txt);
if (filterList.length > 0) {
renderList(filterList);
} else {
console.log("Not Found");
renderList(arrText);
}
}
});
see full example here: http://jsfiddle.net/m25UW/
i hope it helps.