Practical Web Programming

Thursday, March 08, 2012

jQuery: How to Use jQuery UI Autocomplete

Earlier today I was migrating the jQuery Autocomplete plugin to jQuery UI Autocomplete and I was having a hard time making it work - the selection list was not displaying. I went to the jQuery UI site but could not find an example and not even a document showing how to handle the data from a dynamic script when using the "source" option. After some testing at home and a lot of hair pulling, I finally got it to display the list.

See the code example below:


<!DOCTYPE html>
<html>
<head>
<title>jQuery: How to Use jQuery UI Autocomplete</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script>
$(document).ready(function(){
$("#ac").autocomplete({
source: function(request, response)
{
$.ajax({
url: "data.php",
type: "POST",
dataType: "json",
data:{
term: request.term
},
success: function(data){
//alert(data);
response( $.map( data, function(item)
{
return item;
}));
}
});
},
minLength: 2
});
});
</script>

</head>
<body>
<input type="text" id="ac" />
</body>
</html>


The dynamic script that returns the data to be displayed in the selection list. NOTE: The data returned is just for this demo. In a real application, this is where you put your code to query the database based on what the user type.

// The text that the user type in the textbox.
$search_phrase = $_REQUEST["term"];

$arr = array();
$arr[] = "111";
$arr[] = "222";
$arr[] = "333";

echo json_encode($arr);
?>


Wednesday, February 29, 2012

Javascript: How to Get Code Execution Time Using Firebug

So you're curious how much time your Javascript code takes time to finish execution. If you're using Firefox, Firebug is your best friend.

Let me show in the following example.


console.time('for loop');

for (i = 0; i < 1000000; i++) {
// do nothing.
}

console.timeEnd('for loop');


To see the console, open Firebug in Firefox, then go to Console tab. If you don't have an HTML page where to put the Javascript code, you can go to http://jsfiddle.net and paste it there.

Recent Post