We know what is autocomplete in input type, that is make some predefined entered texts come under the input type box, while focusing on the input type, similarly we are searching some content from mysql database, this actually facebook style search concept to suggest some data for select before we get the exact search, for that we are using this kind of search, and this is very simple to make search in php, mysql with ajax and jquery. let see it in brief.
as like you see in the above image, the search will be comes like that by using php, mysql and ajax with jquery.
DATABASE DETAILS
database name-->2my4edge
table name --> autocomplete
column names --> id, name, email
DB.PHP
<?php $connection = mysql_connect('localhost','root','') or die(mysql_error()); $database = mysql_select_db('2my4edge') or die(mysql_error()); ?>
the above is database file.
INDEX.PHP
<div class="content"> <input type="text" class="search" id="searchid" placeholder="Search for people" /> Ex:arunkumar, shanmu, vicky<br /> <div id="result"></div> </div>
AJAX
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = 'search='+ searchid; if(searchid!='') { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery("#result").live("click",function(e){ var $clicked = $(e.target); var $name = $clicked.find('.name').html(); var decoded = $("<div/>").html($name).text(); $('#searchid').val(decoded); }); jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $('#searchid').click(function(){ jQuery("#result").fadeIn(); }); }); </script>
the above all for make action in SEARCH page with out refreshing the page.
SEARCH.PHP
SEARCH.PHP
<?php include('db.php'); if($_POST) { $q=$_POST['search']; $sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5"); while($row=mysql_fetch_array($sql_res)) { $username=$row['name']; $email=$row['email']; $b_username='<strong>'.$q.'</strong>'; $b_email='<strong>'.$q.'</strong>'; $final_username = str_ireplace($q, $b_username, $username); $final_email = str_ireplace($q, $b_email, $email); ?> <div class="show" align="left"> <img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/> </div> <?php } } ?>
RELATED POSTS:
Fantastic
ReplyDeletereally
Deleteberkreatif banget..
Deletesalam kenal
ilove you
thanks thats all i need, you are the best
ReplyDeleteIt seems to be a bug.
ReplyDeleteWhen you search, and click on the image or text, it will not be selected. You have to click in the "white" area.
Antoher bug is that it is case senestive.
ReplyDeleteIf you search for "a", all "a" will be small in the search output. If you search for "A", all "a" will be in capital.
How to fix?
Is there anyway your could combine this with http://www.w3schools.com/php/php_ajax_database.asp?
stupid mind
DeleteYou are the best! Thanks!
ReplyDeletebug
ReplyDeletewhat for 6 different table suggestion like fb users group pages ext
ReplyDeleteAny solution for this?
ReplyDelete"When you search, and click on the image or text, it will not be selected. You have to click in the "white" area."
Hi, thanks for the excellent tutorial. I have configured this so that when an item is selected from the drop down box, it updates the input box and then a Submit button can be used to direct you to a specific URL. This works fine but its very temperamental and doesnt always update the input box straight away. Ideally, I would like the selection from the drop down box to automatically direct you to the URL rather than the user having to click on the Submit button as well. Any suggestions? Is this a tweak to the JQuery?
ReplyDeletewhere can i put php codes of search
DeleteWhen I start typing I just get
ReplyDelete'.$q."; $final_username=str_ireplace($q, $b_username, $username);
$final_email=str_ireplace($q, $b_email, $email);?>
Am I doing something wrong? I am on IE11 if there is an incompatibility with that?
ff
DeleteWorks like a charm! I only have one problem, that is if i click the input off focus, the current search results (in the #result) do not disappear. Anyone know what that is?
ReplyDeleteonblur="this.value=''"
Deleteif(searchid!='')
Delete{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}
else
{
$("#result").hide();
}
my results doesnt want to disapear
ReplyDeleteonblur="this.value=''"
Deleteif(searchid!='')
Delete{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}
else
{
$("#result").hide();
}
i want to search through ajax all field of data base like search by name, search by number, search by area anything user want to search.
Deleteif you have any idea or any code please contact me to below email address
skunjadiya222@gmail.com
Obrigado ajudou-me bastante ...continue assim
ReplyDeleteI have the same problem with others, any solutions?
ReplyDelete"When you search, and click on the image or text, it will not be selected. You have to click in the "white" area."
thank yooooooou
ReplyDeleteyes is working nice and thankyou so mush great work
ReplyDeleteFor those having difficulties with clicking, edit it to make the result div clickable. thatll sort your problem out
ReplyDeletenice one
ReplyDeleteAwesome! Cheers
ReplyDeleteIt's working...nice....thank you...
ReplyDeleteur a saver man
ReplyDeleteFor those having difficulties with clicking, edit it to make the result div clickable. thatll sort your problem out. Please how
ReplyDeleteUgh, a coding blog that doesn't accept HTML inside a comment? That's awful.
ReplyDeleteI'll do my best then -
Replace the "jQuery("#result").live("click",function(e)" function with:
jQuery(".show").live("click",function(e){
$name = $('span.name', this).html();
var decoded = $("LEFTBRACKETdiv/RIGHTBRACKET").html($name).text();
$('#searchid').val(decoded);
});
Works for me. Can click anywhere in it and it works.
its not working
DeletePut onclick='fill("")' within div tag. and you don't need span tag.
Deleteadded a column `link` to mysql and search.php, how to make the the search results clickable to go to the corresponding link? ie on click first result, go to google.com?
ReplyDeletenot working :/
ReplyDeleteHi
ReplyDeletehttp://www.discussdesk.com/autocomplete-search-in-php-mysql-json-with-navigation.htm
Any solution for this?
ReplyDelete"When you search, and click on the image or text, it will not be selected. You have to click in the "white" area."
Works great and I have adapted it to suite my needs.
ReplyDeleteBUT - I have noticed the script conflicts with bootstraps Modal Fade. When the script is on the bage the fade no longer works.
Any ideas?
It's working fine thank you so much...
ReplyDeleteThis doesn't work for me in IE 11.
ReplyDeleteWorks fine in FF 28 and Chrome 34.
I say "fine" lightly. I too have issues with clicking within the result div, sometimes it doesn't work. I applied the suggestion made by Rob Whit and I can click anywhere, thank you!
IE support would be great, though.
why mine couldnt work? can you help me with this plssss.
DeleteVery helpfull, thanks, there another example, it may help you:
ReplyDeletehttp://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery
Thanks for share. Nice tutorial :)
ReplyDeleteHi, Nice working example
ReplyDeleteCool simple nice working example. Thanks You very much
ReplyDeleteOne of the problems you may be having is if you are loading a newer version of jquery. If you are using anything later than 1.9 then the .live() function will not work for you. You need to change the .live() in the javascript to .on()
ReplyDeleteThe new working JS would be:
...
jQuery("#result").on("click",function(e){ ...
jQuery(document).on("click", function(e) { ...
...
Hope that helps someone looking at this now.
That worked for me!!! thanks
Deletethank you
DeleteThank You
Deleteyou for got to add the Css - Pretty important in the tutorial
ReplyDeleteThank you.
ReplyDeleteNice injection vulnerability LOL
ReplyDeleteArun rocks. Thanks.
ReplyDeleteEbonywiz
Amazing! Very beautiful e useful auto-complete functionality. I have just one question. Are there any way to navigate with this options by keys up and down from keyboard?
ReplyDeleteIs there any way to navigate suggestions with up and down arrows from keyboard?
ReplyDeleteYes, its very beautiful but has some bug.
ReplyDeleteWhen i click on text(name of people) or photo too, it is not select..
Please fix dis issue. Otherwise its very preety to see.. Thanx
thanks
ReplyDeleteTotaly works! thank u very much.. you are the best! :D
ReplyDeleteYes, its very beautiful but has some bug.
ReplyDeleteWhen i click on text(name of people) or photo too, it is not select..
Please fix dis issue. Otherwise its very preety to see.. Thanx
thank you brother
ReplyDeletetotal solution auto complete is:- http://phpseason.wordpress.com/2013/02/13/php-autocomplete-tutorial-using-jquery/
ReplyDeleteI have made such 2 search boxes and 1st box copies the values of the other box . . . . . what to do plzz help
ReplyDeletewhen i clicking on image its not working
ReplyDeletewhere i have to place the ajax code
ReplyDeletehi bro, while approving the comment, why don't suggest a solution as it's not a big question to you
ReplyDeletethanks i really need this :3
ReplyDeleteThanks, now i can make my own autocomplete search fiture.
ReplyDeleteVery fantastic code. Thanks for your wonderful work.
ReplyDeleteBut there small problem here, when the search list is too long, could web make a scroll bar and limit results to 5 or 6?
I did it, just insert a div with style "height: 300px; overflow-y: auto;" (the dimension is up to you).
DeleteI don't know how to post the whole code here, just contact me as skype kazihaha
How can I change the script to pick the email instead of the name for the input field?
ReplyDeleteGreat work though! :)
use "$username" instead of "$final_username" in div tag
ReplyDeleteand remove "name like '%$q%' or"
in search.php file
Hi,
DeleteI ended up adding class="email" on the div in search.php and changed the ".name" to ".email" on the ajax code in index.php.
That did the trick. Thanks!
thanks
ReplyDeletePlease help me.
ReplyDeleteHow can we align the div result at right of input box?
Nice Post. Thank You
ReplyDelete"that is also comes"? Go back to school, ffs.
ReplyDeleteThank you. Really it is nice.
ReplyDeleteshould be trying, it is vey help for us
ReplyDeleteHi anyone fixed the issues yet?
ReplyDelete1. "When you search, and click on the image or text, it will not be selected. You have to click in the "white" area."
and the text box needs to be populated too...
Use the below
Delete$("#result").on("click",function(e){
$name = $('span.name', this).html();
var decoded = $("leftarrowdiv/rightarrow").html($name).text();
$('#searchid').val(decoded);
});
instead of
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("leftarrowdiv/rightarrow").html($name).text();
$('#searchid').val(decoded);
});
on instead of live never seems to work with latest 1.9 jquery. it always shows the first result in div "show" even if i click the first and the second result in show div
Deleteon instead of live never seems to work with latest 1.9 jquery. it always shows the first result in div "show" even if i click the first and the second result in show div
DeleteHi everyone,
ReplyDeleteHow can i get the selected image or text value to appear on the text field ?
Thanks
hello everyone...
ReplyDeletehow can i insert or select togather img and text and echo same div and if i wanna only text then echo only text and if only img then only img echo ?
so please any idea
how can i insert or select togather img and text and echo same div and if i wanna only text then echo only text and if only img then only img echo ?
ReplyDeleteso please any idea
have liked me so much !
ReplyDeleteGracias
hi everyone !
ReplyDeletei tried this script and it's i need.
but there is a function which is not present : the multiple search with unordered words.
I explain myself :
in the Database i have for example : " hello world, my name is john"
if i search "hello world", i will find it
but if i search "world hello" i will NOT find it
Someone has a solution for this problem ?
It'll be great !
Thanks a lot
I cant pic the item from this list how could i do that!
ReplyDeletegood tutorial very helpful another good tutorial to create search system using php and mysql http://talkerscode.com/webtricks/basic-instant-fulltext-search-system-using-ajax-and-php.php
ReplyDelete@
ReplyDeleteNice script, but unfortunately it does not work on iPad. Cannot pick the item from the result list.
ReplyDeleteThis is extremely helpful. Thanks man!
ReplyDeleteDoes anybody know if there is a way to do this without JQuery???
ReplyDeleteYes that is work.
ReplyDeleteCan apply in my web
Thanks man..!
Does anybody know if there is a way to do this without JQuery???
ReplyDeletebantal mobil
How to auto submit on clicking the autocomplete result.
ReplyDeletemail me the answer please at mukesh.jangid55@gmail.com
Big thanks for mr Arunkumar
ReplyDeleteVery benefit for me.
thanks
ReplyDeleteVery usefull for us.
Warning: mysql_fetch_array() expects parameter 1 to be resource, string given in ...in search.php line no. 7 i'm getting this error..
ReplyDeleteGreat auto complete search, is there a option to show that there are no results in the database that match the input?
ReplyDeletereally great sharing, thank you guy
ReplyDeleteIs it possible to view a text when no search results are found?
ReplyDeleteIs it possible to view a comment when no results are found in the database?
ReplyDeleteThanks !
ReplyDeleteI want to select the names in the DIV tag to be selected using the keyboard up and down arrow. Can anyone please help me out from this ? :(
ReplyDeleteHello
ReplyDeleteNice example , but how to make the example responsive for all the screens ?
Regards
thanks,great example kumar
ReplyDeleteyour wonderful friend..youve been my helper
ReplyDeletegreat info, thank you
ReplyDeleteThank You........!!
ReplyDeleteFor the white space clicking problem, I found this useful:
ReplyDeleteif($(e.target).attr('class') == 'show')
{
var $clicked = $(e.target);
}
else
{
var $clicked = $(e.target).parent();
}
For the white space clicking prob, I found this useful:
ReplyDeleteif($(e.target).attr('class') == 'show')
{
var $clicked = $(e.target);
}
else
{
var $clicked = $(e.target).parent();
}
thank you :)
ReplyDeleteJual Sepatu Murah
Sepatu Online
Grosir Sepatu Murah
Sepatu Murah
kemeja
kemeja pria
kemeja flanel
thank you
ReplyDeleteJual Sepatu Murah
Sepatu Online
Grosir Sepatu Murah
Sepatu Murah
kemeja
kemeja pria
kemeja flanel
Thanks a lot brother.very helpful..
ReplyDeleteThanks a lot.Very useful script.
ReplyDelete.....
thank you vry much i have wasted around 4 hrs finally got thanks
ReplyDeleteHello
ReplyDeleteI would like to know how to click on the result to display the choice, thanks
Thanks friend,
ReplyDeleteit really helped me....
Could you create this with CodeIgniter 3?
ReplyDelete