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
index.php
// Pakainfo.comAutocomplete Textbox using jQuery, PHP and MySQL Ajax Autocomplete textbox using jQuery, PHP and MySQL
Enter suggestname :
name_fetch.php
';
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 = ''.$first.''.$last;
echo '
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('No Matches notexit'); } $("#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"); }); }); });