Very useful stuff of autocomplete textbox with jquery.
It comes with the search stuff, based on the user entered the input length.
minLength: 2,
The autocomplete will come after the user given the string length is 2. The autocomplete need to integrate with database stuff also cover here, Just remove the source container "[....]" and add the server side script file for query the database.
Thats it.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#myfriend").autocomplete({
source: [
"Mysql",
"Asp",
"BASIC",
"C",
"PHP"
],
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
$("#selected-myfriend").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
}
});
});//]]>
</script>
</head>
<body>
<input type="text" id="myfriend" />
</body>
</html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#myfriend").autocomplete({
source: [
"Mysql",
"Asp",
"BASIC",
"C",
"PHP"
],
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
$("#selected-myfriend").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
}
});
});//]]>
</script>
</head>
<body>
<input type="text" id="myfriend" />
</body>
</html>
It comes with the search stuff, based on the user entered the input length.
minLength: 2,
The autocomplete will come after the user given the string length is 2. The autocomplete need to integrate with database stuff also cover here, Just remove the source container "[....]" and add the server side script file for query the database.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#myfriend").autocomplete({
source: "autosearch.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
$("#selected-myfriend").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
}
});
});//]]>
</script>
</head>
<body>
Country: <input type="text" id="myfriend" />
</body>
</html>
Here the source data get from the autosearch.php file with the GET method. The output of the source file sould be the json data.<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#myfriend").autocomplete({
source: "autosearch.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
$("#selected-myfriend").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#myfriend").val(ui.item.label);
}
});
});//]]>
</script>
</head>
<body>
Country: <input type="text" id="myfriend" />
</body>
</html>
//autosearch.php
<?php
$term = $_GET['term'];
$link = mysql_connect('localhost', 'user', 'password');
$db_selected = mysql_select_db('database', $link);
$sql = "SELECT name FROM country WHERE name LIKE '%{$term}%' LIMIT 5";
$rs = mysql_query($sql);
$autoArray = array();
While($row=mysql_fetch_row($rs)){
$autoArray[] = $row[0];
}
echo json_encode($autoArray);
?>
<?php
$term = $_GET['term'];
$link = mysql_connect('localhost', 'user', 'password');
$db_selected = mysql_select_db('database', $link);
$sql = "SELECT name FROM country WHERE name LIKE '%{$term}%' LIMIT 5";
$rs = mysql_query($sql);
$autoArray = array();
While($row=mysql_fetch_row($rs)){
$autoArray[] = $row[0];
}
echo json_encode($autoArray);
?>
Thats it.
No comments:
Post a Comment