top_menu

Sunday, 23 September 2012

Facebook's search bar allows users to search for all users, communities, groups, apps and pages. It provides suggestions while typing. In this tutorial i'll explain you, how to create such a search input box in your website using jquery, ajax and php. I made the code short and simple to understand. Please suggest if any additional feature required.

114 comments:

Hello Ma'am!!!! Your blog is quite excellent. Thanks a lot!!!!I had 1 question related to this article!!!!Can this same concept of 'facebook type search' be applied using asp.net or java instead of php???bcoz i don't know php at all!!!!!

Hello Ma'am, I was successful in displaying the data using ASP.NET!!! Thanks a lot!!!!But ma'am there is one slight problem that i faced. Whenever i search for my data it appears perfectly but there is an image just like the blank textbox appearing at the last row!!!What could be the problem ma'am?????

Hello Ma'am the two jquery methods namely jQuery("#divResult") & jQuery(document).live are not getting executed in my program. So the data remains in the divResult as it is!!!! It does not go away if the textbox looses it's focus!!!What should i do???

hi hello from trinidad,well i am new to php and jquery i try out your code but i am having a problem. 1)i have two field in my database 1 for firstname and the other for lastname it work perfectly while typing the firstname but when i press space to continue to type the lastname is hide the DivResult and the search stops,what can i do to fixed this so i can type out the firstname press space to continue with the lastname.thanks much

Hi again from Trinidad and Tobago, thank you for replying,it works perfectly,you are the best,thanks i can wait to show my classmates and pass on the knowledge,ill surely referred them to this site.thanks again

Finally i uploaded a ASP.NET version of the facebook type autocomplete script(Find it near Download Script). Please check it. I hope it will solve your issue. If not please feel free to come back with your code.

Hello ma'am,How can we place the results of the search box over an already existing slideshow???I've tried jquery methods like focus(), toggle(), etc but it didn't solve my problem!!!!No matter what the slideshow always comes over the #divResult!!I've sent a word document with the screenshot!!!Please could you suggest what should be done to overcome this problem????

Hello Ipsita! I have a problem and I will be very happy if you could help me! At this page is an autocompleter http://blog.rarecore.eu/autocompleter-using-xajax.html .It works fine, but IT DOESN"T WORK for "Cote d'Ivoire" . The problem is "autocomplete apostrophe AND injection attack". I have read this page http://stackoverflow.com/questions/10054670/autocomplete-apostrophe-and-injection-attack , but isn't enough...Could u help me? Thank u very much!

You just need to add the code for the textbox or input box.For example, in the 'Search Textbox' found in most of the sites!!!!!!!Remember to change the name of the input box or textbox in your code!!!!

Thank you for your blog...Its an excellent one... But i have a problem.. click on the result doesn't work unless its the email.. i want the result when clicking on image and name too..can you help me.?

Hi Ipsita. Please see my website, mipectower.com.vn, seacrch input in the MasterPage, it work good in default.aspx page, but in the other page i don't know why? here is my code in the search.ashx with url target, it's ok ?Response.Write("" + name_title + "");

hi maam nice tutorial. but i have a little issue when i click the name that appears in the search box it did not visit the profile of webpage the link shows under the person name. how can i do this? your reply really helps me. thanx

Nice code but I am having problem implementing it!I am using Mozilla Firefox 16.0.1 for ubuntu canonical 1.0 .I updated the server name,username password and database name in file as well as created the table using the same queries.PHP version:5.5.4 mysql:5.5.29.It seems Jquery code is not working.Can you please help me solving the problem?

This is quite simple. You only need to change the search.php. Replace the line-6 with the following$sql_res=mysql_query("select uid,username,email,media,country from test_auto_complete where username like '$q%' or email like '$q%' order by uid LIMIT 5");

I just removed the first %

Anyway i will recommend check out the new updated facebook search script http://www.2lessons.info/2013/05/jsearch-free-facebook-type-search.html?showComment=1368977317246#c6334945418322329527

Hello Madam , can i do this search option in Python, if yes then where i need to change the code.

I try to do that in python, and i completed in different way, it is working but major problem is that it is to to slow, please make me clear , how can i make my search fast.I Used MongoDB having 3 lakhs of record for searching

did you have any tutorial like facebox, where onclick it call a function in script & then open a url just like facebox - please tell me if you want more details - or should i mail you the details thanks in adavance arpit

Hello Mam,, Nice tutorial , but can u help me further, yup, Im very much newbie to development & I dont know how to get data from two tables for this auto suggest tutorial.. So please help me out.. Thanks in advance...

Hello Maam,Its wonderful,working fine upto displaying results.How to implement up and down arrow key ,enter key events in your code.I am new to jquery can you please help me..Thanks in advance....http://www.mohalimovers.in