PHP MySQL Autocomplete textbox using jQuery
Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For jquery autocomplete multiple fields using jquery ajax php and mysql
simple created table in mysql,and table name jobmst to simple created a table and some insert data in cityname` tables for javascript – Autocomplete TextBox using php.
Table create fetch structure for table `jobmst`
CREATE TABLE `cityname` ( `id` int(5) NOT NULL auto_increment, `name` varchar(30) default NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=167 ;
Dumping simple data for table `jobmst`
INSERT INTO `cityname` (`id`, `name`) VALUES (1, 'Rajkot'), (2, 'India'), (3, 'Gujrat'), (4, 'Morbi'), (5, 'Kalavad'), (6, 'div'), (7, 'Ahemdabad'), (8, 'surat'), (9, 'gondal'), (10, 'baroda');
Autocomplete textbox using jQuery, PHP and MySQL Example
config.php
<?php $host = "localhost"; // your Host name $db_name = "yournewdbname"; // your Database name $db_user = "root"; // your Database user name $db_pass = "[email protected]#$%^&&"; // your Database fetchstrong Password $db_table= "jobmst";// Table name $db_column = "name"; // Table simple city or place column from which suggestions data here will get shown //config data to connection here $conn = mysql_connect($host,$db_user,$db_pass)or die(mysql_error()); //your database connection mysql_select_db($db_name,$conn)or die(mysql_error()); ?>
index.php
// Pakainfo.com
<HTML>
<HEAD>
<TITLE>Autocomplete Textbox using jQuery, PHP and MySQL</TITLE>
<SCRIPT src="js/jquery.js"></SCRIPT>
<SCRIPT src="js/script.js"></SCRIPT>
</HEAD>
<BODY>
<center>
<h1>Ajax Autocomplete textbox using jQuery, PHP and MySQL</h1>
<div class="main">
<div class=""><a href="http://www.Pakainfo.com">7</a></span></div>
<div id="holder">
Enter suggestname : <input type="text" id="suggestname" tabindex="0"><img src="images/imgloading.gif" id="imgloading">
</div>
<div id="data_response_result"></div>
</div>
</center>
</BODY>
</HTML>
name_fetch.php
<?php
include("config.php");
$suggestname = $_POST['data'];
$sql = "select name from ".$db_table." where ".$db_column." like '".$suggestname."%' limit 0,20";
$result = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($result))
{
echo '<ul class="list">';
while($resultrow = mysql_fetch_array($result))
{
$fetchstr = fetchstrtolower($resultrow['name']);
$start = fetchstrpos($fetchstr,$suggestname);
$end = similar_text($fetchstr,$suggestname);
$last = subfetchstr($fetchstr,$end,fetchstrlen($fetchstr));
$first = subfetchstr($fetchstr,$start,$end);
$final = '<span align="center">'.$first.'</span>'.$last;
echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>';
}
echo "</ul>";
}
else
{
echo 0;
}
?>
script.js
$(document).ready(function(){
$(document).click(function(){
$("#data_response_result").fadeOut('slow');
});
$("#suggestname").focus();
var offset = $("#suggestname").offset();
var width = $("#suggestname").width()-2;
$("#data_response_result").css("left",offset.left);
$("#data_response_result").css("width",width);
$("#suggestname").keyup(function(event){
var suggestname = $("#suggestname").val();
if(suggestname.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$("#imgloading").css("visibility","visible");
$.ajax({
type: "POST",
url: "name_fetch.php",
data: "data="+suggestname,
success: function(msg){
if(msg != 0)
$("#data_response_result").fadeIn("slow").html(msg);
else
{
$("#data_response_result").fadeIn("slow");
$("#data_response_result").html('<div style="text-align:left;">No Matches notexit</div>');
}
$("#imgloading").css("visibility","hidden");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
{
notexit = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
notexit = 1;
});
if(notexit == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
notexit = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
notexit = 1;
});
if(notexit == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$("#data_response_result").fadeOut("slow");
$("#suggestname").val($("li[class='selected'] a").text());
break;
}
}
}
else
$("#data_response_result").fadeOut("slow");
});
$("#data_response_result").mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#suggestname").val($(this).text());
$("#data_response_result").fadeOut("slow");
});
});
});
Leave a Reply