Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Is there an efficient way to list users information as someone type in the search box?

The problem I'm facing now is to design an efficient live search in user search box. What I want is If somebody starts typing then I should make a call to fetch appropriate users. As far as I know if I implement such a thing in AJAX way then PHP calls on the server side would be the bottleneck as it's not asynchronous. And I'm curious about how different sites implement these features? Have you had the same problem? Should I use AJAX in some different ways? Or are there any other tools that I'm unaware of? Please answer if you've had the same challenge before?

user-image
Question added by alireza hoseini , PHP & Python back-end developer , Fax.ir
Date Posted: 2014/01/19
Feras Abualrub
by Feras Abualrub , Web Solutions Manager , Qistas for Information Technology

The following Example is working100%, you need to customize it as per as your DB Tables.

 

what ever you write in the text box, the result will appear without pressing any buttom and without refreshing the page.

 

i created it long time back and i found it in my files.

 

its depends on ajax tech.

 

index.php

<head>    <title>Jquery | Instant Search by - Feras Abualrub</title>        <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href=""/>    <script type="text/javascript" src="js/jquery1.8.2.js"></script>    </head><body>    Start Searching: <input type="text" id="search" style="width:250px;"/>        <div id="search_results" style="width:355px;height:auto;color:red;"></div>        <script type="text/javascript" src="js/search.js"></script>    </body>

 

       

   

 

-- dont forget to include also jquery1.8.2.js

search.js

$('#search').keyup(function(){        var search_term = $(this).val();        //sending the value to search.php by http post        $.post('php/search.php',{search_term: search_term}, function(data){                //displaying results in the div                $('#search_results').html(data);            });});

 

 

db.php

 <?phpmysql_connect("localhost","root","") or die (mysql_error());mysql_select_db("jquery") or die(mysql_error());$SQL = "select * from users where username = $username and password="";?>

 

 

search.php

 

<?phprequire("db.php");if(isset($_POST['search_term'])){    $search_term = mysql_real_escape_string( htmlentities( $_POST['search_term'] ) )  ;        if(!empty($search_term))    {        $search = mysql_query("SELECT place,description FROM places WHERE place LIKE '%$search_term%'")            or die(mysql_error());                    $result_count=mysql_num_rows($search);        if($result_count ==0)        {            return "No Results";        }                $suffix = ($result_count !=1) ? 's' : '';                echo "<p> your search for <strong>" .$search_term. "</strong> has returned <strong>".$result_count."</strong> result".$suffix ."</p>";                while($result_row = mysql_fetch_assoc($search))        {            echo "<p style='color:blue;'><strong>".$result_row['place']."</strong><br/>".$result_row['description']."</p>";                    }                    }}?>

 

 

Muhammad Majid Saleem
by Muhammad Majid Saleem , Senior PHP Developer / Project Manager , SwaamTech

I agreed with @Feras Abualru. You may use jQuery autocomplete method to achieve your goal. Kindly have a look on: http://jqueryui.com/autocomplete/

You may find many autocomple examples with jQeury.

Mohamed Shameer
by Mohamed Shameer , OpenText ECM Consultant & ECM Administrator , Petrochemical Industrial Company

The jQuery-ui Autocomplete widget is a good place to start. It can be easily customized and is widely used. It can easily handle both static data in a javascript variable or dynamic data from an ajax call. It can be set to wait a specifed number of milliseconds so the search doesn't flood the server while a user is typing and can also be configured to require a certain number of characters before it will search so it doesn't return a huge result set.

Depending on the size of your data, you're probably going to want to use ajax with caching for the data source. There's an example of this on the Autocomplete page. If you will only be searching a up to maybe one hundred items max, static data in a javascript variable may be better, but it would need to be populated on each page.

If the search is just based on user names and the name starts with what is typed, the php side will be very fast since a database query should be very fast with an index. Depending on your data, the search box in a "contains" mode probably won't be terribly slow. If possible, you could also set up caching through memcached or something similar on the server side to cache searches which would make all requests potentially much faster. The results could have an expiration time of a few minutes or longer depending on traffic how often the data might change.

Hatim Laxmidhar
by Hatim Laxmidhar , Self Employed , The Way It Works

Solr is a java based. In order to run the Solr you do not necessarily need Tomcat.

Solr can be executed itself. What you need is Java1.6 or later version of Java. 

Visit: http://lucene.apache.org/solr/4_6_0/tutorial.html for details

 

Now in order to use the Solr with php you can use a PHP extension for Solr

To know more please visit: 

http://www.php.net/manual/en/book.solr.php

http://pecl.php.net/package/solr

 

Note:

Though running search in separate process/server definitely add cost to the performance, sometimes this is wise decision to keep it separate.

This is completely based on your application, the data you want to access and other factors.

 

Update: 

If you are using database for query to search the data you will hardly get faster results. The fact is you can not change data structure / algorithm of a third party database.

However, you can use different approach, get your required data into memory if its too large then you may use file system.

You can then use different data structure and search algorithms like Trie.

You may also run this searching algorithm in separate process/script that will return results to your php code.

This idea triggered in my mind after reading this article:

http://stevehanov.ca/blog/index.php?id=114

Muhammed Sallout
by Muhammed Sallout , Technology Development Manager , GLORY TECHNOLOGY

I like your question, it is deebly technical in rarly questioned topic.

First of all, asynchronous doesn't mean old data.

In Synchronous the script stops and waits for the server to send back a reply before continuing, where asynchronous the script allows the page to continue to be processed and will handle the reply if and when it arrives.

 

So in otherword, forget the Synchronous connection for such function, otherwise you will get the page freezed for a while after each letter he typed there.

 

asynchronous vs. synchronous communications

Zaid Rabab'a
by Zaid Rabab'a , Technical Team Lead , ESKADENIA Software

Hi alireza,

If you implement this server side (PHP-MYSQL) the cost will be very high, so try to use a search engine like solr

http://lucene.apache.org/solr/

or use a non-blocking server , Tornado or NodeJs to fetch the data fast and wtihout the high cost

 

Mohsin Syed Muhammad
by Mohsin Syed Muhammad , CTO Chief Technology Officer , Kassim Textiles (Pvt.) Ltd.

Dear Use Autocomplete, it is best practice for your requirement...

More Questions Like This