jQuery Autocomplete With MySQL And PHP


Making an auto-suggestion script, something that reads your input and shows related matches as you type, can be quite a challenge. It’s been made very popular by the big search engines. Yahoo did it first, and now Google has Instant which is killing its competitors. But how do you get one on your site? Luckily, jQuery has given us a very simple solution: http://jqueryui.com/demos/autocomplete/.

Let’s pretend you are making a website for a client who has multiple locations all throughout the United States. They ask you to build a form which takes a zipcode and spits out locations surrounding that zipcode. They also request, that, as the user types their zipcode, a suggestion box appears showing them relevant matches.

jQuery’s autocomplete makes this an easy task. The first thing you need to do, obviously, is create your form. Make sure you give your search box an id attribute, as it’s easier to work with that way.

<form action="search.php" method="post">
	Enter your zipcode:
	<input type="text" id="zipsearch" />
 
	<br />
	<input type="submit" value="Search" />
</form>

The second thing you need to do is tell jQuery to use its auto-complete User Interface (UI) on the search box you just made. When the auto-complete UI searches a database, you need to specify the website address for the PHP script that will be querying the database and returning results. Let’s call our script, ‘suggest_zip.php’ since it will be suggesting zip codes from partial searches. Also, to limit the amount of queries that are made, we can tell the auto-complete UI not to send anything to the server unless the user has typed at least ‘x’ amount of characters, or numbers in our case. Let’s limit ‘x’ to 2 numbers. We can stick this all in the ‘ready’ event, so it doesn’t fire until the document has loaded.

?View Code JAVASCRIPT
jQuery(document).ready(function($){
	$('#zipsearch').autocomplete({source:'suggest_zip.php', minLength:2});
});

And that’s it for the HTML and JavaScript side of things. Just make sure you are loading the required jQuery libraries to make this work. See the link for dependancies: http://jqueryui.com/demos/autocomplete/. You can download jQuery at the following locations: http://docs.jquery.com/Downloading_jQuery and http://jqueryui.com/download. Our script also uses jQuery’s ‘smoothness’ UI styles, which come bundled on their site. The UI styles style the results for us. You can make your own theme or use one of the pre-built themes jQuery has: http://jqueryui.com/themeroller/.

Now, let’s take a look at how we need to build our PHP script to work with the auto-complete UI that we just added to our form. First, we need to make a connection to the database. Since I use MySQL for my database, I’ll use mysql_connect and the mysql_* functions to make this script. After we have a valid connection to the database and the database we are using has been selected, mysql_select_db(), we can write our database query. Now, jQuery’s auto-complete expects two values to be returned along with each result: ‘value’ and ‘label’. Our script will be returning an array of data. Each item in that array needs to have ‘value’ and / or ‘label’. If ‘label’ is provided, jQuery shows your results using this, but when you select a result, it uses ‘value’ to populate your textbox. If ‘label’ is not provided, jQuery will use ‘value’ for both. So, our array in PHP looks like this: $data = array( array(‘label’=>’Item One’, ‘value’=>1) , array(‘label’=>’Item Two’, ‘value’=>2) ); If you need help with arrays in PHP, see the following webpage: http://php.net/array. When we return this data back to jQuery, we have to put it into a format that jQuery understands, which is JSON, aka. Javascript Object Notation. In order to turn an array of data from PHP into JSON, we use PHP’s built-in function json_encode. Use echo or print to transfer the data from PHP to jQuery: echo json_encode( $data ); If we take our array example above, what would be returned actually looks like this: [{"label":"Item One","value":1},{"label":"Item Two","value":2}], and that is JSON.

When jQuery sends the HTTP request to our suggest_zip.php script, it will send the text that’s being searched in the variable labeled, ‘term’. We can use $_REQUEST['term'] to access it. $_REQUEST allows us to access variables that were sent along with HTTP Requests, so if it was sent by an HTML Form Post, or over the URL: www.website.com?term=text, $_REQUEST will allow us to access it.

Let’s take a look at the PHP code inside of suggest_zip.php:

<?php
 
// if the 'term' variable is not sent with the request, exit
if ( !isset($_REQUEST['term']) )
	exit;
 
// connect to the database server and select the appropriate database for use
$dblink = mysql_connect('server', 'username', 'password') or die( mysql_error() );
mysql_select_db('database_name');
 
// query the database table for zip codes that match 'term'
$rs = mysql_query('select zip, city, state from zipcode where zip like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by zip asc limit 0,10', $dblink);
 
// loop through each zipcode returned and format the response for jQuery
$data = array();
if ( $rs && mysql_num_rows($rs) )
{
	while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
	{
		$data[] = array(
			'label' => $row['zip'] .', '. $row['city'] .' '. $row['state'] ,
			'value' => $row['zip']
		);
	}
}
 
// jQuery wants JSON data
echo json_encode($data);
flush();

Here’s the SQL structure necessary for the zipcode table, written in MySQL:

create table zipcode
(
	id int not null primary key auto_increment ,
	zip varchar(20) not null ,
	city varchar(100) not null ,
	state varchar(5) not null 
);
create index idx_zipcode on zipcode ( zip(5) );

And that’s it. Now you have a form that will auto-suggest zipcodes as you type.

View: Live Example; suggest_zip.php

Download: ZIP Bundle – Grab this for a complete zipcode table and all the code bundled together.

Join us on DALNet for questions and discussion; irc.dal.net #php (requires IRC client)

Live Example

Grouped Results

As requested, here is an example demonstrating how to group the results in the autocomplete UI. Since this blog is rather old, I have chosen to demonstrate this using PDO instead of the deprecated mysql_* functions.

First, we need to create a custom autocomplete widget, so we can overload the method used to render the menu. When the UI renders the menu, it needs to read the current category, and if it’s not the same as the last category, it should print an LI with a special class on it, so the autocomplete knows it’s not a result. This assumes that the results are sorted by category, otherwise you will get the category listed multiple times.

?View Code JAVASCRIPT
$.widget('custom.groupedSearch', $.ui.autocomplete,
{
	_renderMenu: function(ul, items)
	{
		var currentCategory = "";
		$.each( items, $.proxy(function(index, item)
		{
			// evaluate the category and render an LI tag
			if (item.category != currentCategory)
			{
				ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
				currentCategory = item.category;
			}
 
			// render the item (this returns the LI DOMNode instance)
			var li = this._renderItem(ul, item);
		}, this));
	}
});
 
// initialize the custom autocomplete widget
$('.zipcode').groupedSearch({
	source : 'groupedZipcodeSearch.php' ,
	minLength : 2
});

The PHP just needs to order the mysql results by the category in question. In my example, the category consists of two fields, state taking precedence. Given a zipcode that starts with “123″, we could demonstrate this query as follows:

select zip, city, state
from zipcode
where zip like "123%" 
order by state asc, city asc, zip asc
limit 0,10

Next, include ‘category’ in the response array and javascript will be able to group it. This example groups the results by city and state, but the javascript will support any grouping, so long as its provided a ‘category’ key in the array returned from the suggestion script.

$data[] = array(
	'label' => 'Displayed Result' ,
	'value' => 'Chosen Result Value' ,
	'category' => 'Grouped Category'
);

View: Live Example; PHP Source

Live Example

Populating Related Fields

As requested, here is an example demonstrating how we might populate related form fields when an item is selected from the search results. This is actually a simple task. To demonstrate this, I’ll be populating the related City and State for the selected Zipcode.

The first step to this is structuring the query so it can fetch and return the desired fields with each row in the search results. It’s easy for my example because all of the data is stored in the same table.

select zip, city, state 
from zipcode 
where zip like '123%'
order by zip asc 
limit 0,10

The second step is formatting the data array before it gets JSON encoded. The related fields need to be included with each result.

$data[] = array(
	'value' => $row->zip ,
	'city' => $row->city ,
	'state' => $row->state
);

The third and final step is setting up the on-select handler for the jQuery Autocomplete UI. All we need to do is populate the related form fields from the data associated with the selected item.

My example is straight forward, all of the fields are in the same form, and I’m not modifying any HTML. You may have different logic in your on-select handler, but the idea is the same.

Please see http://api.jqueryui.com/autocomplete/#event-select for more information.

?View Code JAVASCRIPT
jQuery(document).ready(function(){
	$('.zipsearch').autocomplete({
		source:'jQueryAutocompleteRelatedFields.php', 
		minLength:2,
		select:function(evt, ui)
		{
			// when a zipcode is selected, populate related fields in this form
			this.form.city.value = ui.item.city;
			this.form.state.value = ui.item.state;
		}
	});
});

View: Live Example; PHP Source

Live Example

VN:F [1.9.22_1171]
Rating: 8.7/10 (284 votes cast)
VN:F [1.9.22_1171]
Rating: +46 (from 80 votes)
jQuery Autocomplete With MySQL And PHP, 8.7 out of 10 based on 284 ratings
Share/Save

, , ,

  1. #1 by Michel Matton on April 5, 2013 - 7:13 am

    I’m trying to get the jquery autocomplete working in a smarty template. Any assistance would be greatly appreciated!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  2. #2 by John Romaine on April 6, 2013 - 10:08 am

    Hi Anthony,
    Any way to modify this code to accommodate user input of suburbs, cities or postcodes?

    Like this?

    http://www.realestate.com.au/buy

    VA:F [1.9.22_1171]
    Rating: 3.0/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 2 votes)
  3. #3 by denchai on April 21, 2013 - 1:07 am

    hello I have a problem with autocomplete with resouce about Mysql :::
    my database contian the Thai charecter
    (because I live Thailand)
    if I search by English alphabet ,it is so good
    but search by Thai alphabet ,it can not find .
    thank you alot

    VA:F [1.9.22_1171]
    Rating: 3.0/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 5 votes)
  4. #4 by denchai on April 21, 2013 - 1:29 am

    Hello
    I can resolve my problem with another charecter by

    Adding this line in the php file after conneting to the database did the trick!:

    mysql_set_charset(‘utf8′,$conn);

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (4 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 3 votes)
  5. #5 by Guilherme on May 2, 2013 - 1:17 pm

    Hi, first of all, congratulations for the awesome script!

    Now, i’m trying to insert a hyperlink at the search results (based at ‘id’ field for each result), is it possible?

    ty

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  6. #6 by Mr. Sharp on May 5, 2013 - 4:03 pm

    First, Thank you for this article.

    I have been able to follow it enough to get it to work fairly quickly. I have been having a problem that I’m sure you have explained but I either missed it or didn’t understand it.

    It is working and allows me to select the information from my db no problem. What I would like it to do is populate the City and State fields in the same form.

    I have played with it for a couple of hours and can’t figure it out. Could you please guide me to the answer?

    Thanks again for everything you have provided.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  7. #7 by Melvinchi on May 14, 2013 - 10:32 am

    Note: if you are using one of the new versions of jQuery you will want to replace change renderItem to renderItemData

    if your jquery >=1.9

    VA:F [1.9.22_1171]
    Rating: 2.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  8. #8 by Paul on May 22, 2013 - 1:39 pm

    I have the same question as comment #22. I have the autocomplete working fine, but I want to pull other information from the same database row into columns in my table. So, I’m searching on phone number (let’s say), and when I find the phone number, I want to automatically populate the Name and Address information on my page.

    I tried reading the reference about binding a function to the select event, but the page that was linked to didn’t contain enough information to help with this type of question. Any insight you can provide?

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
  9. #9 by Obud on May 29, 2013 - 1:07 am

    Thank you very much……

    VA:F [1.9.22_1171]
    Rating: 3.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 3 votes)
  10. #10 by Bali ratih on June 4, 2013 - 11:32 pm

    thank you so much,
    finally i found your site
    and found the solution of my problem

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 3 votes)
  11. #11 by hamid on June 7, 2013 - 2:15 pm

    hi-thanks very goood
    how me can set autocomplate for wordpress
    me need a autocomplate like
    http://tinypic.com/view.php?pic=10gbn29&s=5
    plz help me , me very need it
    email:t1soft@yahoo.com
    tnx for all

    VA:F [1.9.22_1171]
    Rating: 1.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. #12 by Glynn on June 19, 2013 - 6:32 am

    Hi, this is amazing! Thank you so so much. One question though:

    When the user selects, in your example a zip code, the zip code is shown without the rest of the text.

    In the link I’ve attached I want the value to be the unique ID code for the business. BUT is then displayed in the text box if the user selects it. I’d still like the business details to show in the box, once selected, and the unique code passed to the next page.

    Is this possible at all? Maybe a hidden field? Any ideas?

    Many thanks in advance, cheers
    G

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  13. #13 by djtetsu on June 26, 2013 - 9:56 pm

    Thank you, all the other stuff on the internet is for smaller datasets and I finally found one that can pull from big tables.

    Great job, happy coding!

    VA:F [1.9.22_1171]
    Rating: 3.7/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  14. #14 by Dreyk on July 2, 2013 - 3:20 pm

    I have a problet when i put 3 fields or input for autocomplete the other two field no complete anything. i think it’s sometime about jqueryconlict. Please help me.

    VA:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  15. #15 by Rene on July 11, 2013 - 7:01 am

    All I have to say, a big thank you!
    i love the part with zip, city and country in 1 field and the different value after selection

    VA:F [1.9.22_1171]
    Rating: 3.7/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  16. #16 by heena on July 18, 2013 - 2:12 pm

    If you type full zip and move away with Tab key it does not populate

    VA:F [1.9.22_1171]
    Rating: 3.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  17. #17 by Anthony on July 18, 2013 - 6:06 pm

    @heena,

    With populating related fields, this example requires you to actually select a result from the autocomplete. As I stated, you will probably have more logic than I do in my simple example. You have a few options to accomplish as you described.

    I would just invoke a search on the AutoComplete UI, onchange, if the user didn’t select a value. But this means that you will need a flag to know if the user selected something since the last search. So, 1) in the ‘search’ event handler, initialize the flag to false. 2) In the ‘select’ event handler, change it to true…

    1) Maybe JS populates the field, or perhaps the user types or pastes a value into the field, maybe the search doesn’t initiate because no key press event fires, or maybe the user just doesn’t select anything because it’s a full complete value. 2) So the user presses tab to focus the next field. At this point, if the hasSelectedResult flag is false, invoke a search programmatically. $(‘#your-field’).autocomplete(‘search’);

    If you want to forcefully populate the related fields onchange, if the user didn’t select anything, then I would suggest keeping around a cache of search results. Onchange, if the user didn’t select anything, pull the closest match with JS and populate the related fields. If you do not have any cache, you may just need fetch them from the server. You can make a simple AJAX request to the same script to fetch the information you need.

    Those just some ideas. I hope they help anyways..

    VN:F [1.9.22_1171]
    Rating: 3.7/5 (3 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 2 votes)
  18. #18 by kyng on August 13, 2013 - 7:51 am

    I used the code , but did some modifications and disabled the city and state fields. This is how the form looks

    Enter a Zipcode:

    City:

    State:

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  19. #19 by Kotphat on September 6, 2013 - 12:50 pm

    will this code works with lastest jquery version?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  20. #20 by Anthony on September 6, 2013 - 1:12 pm

    @kotphat Yes, it should work just fine with the latest version of jQuery. However, if you are creating your own extension, make sure you are calling the correct methods for your current version when overloading anything. If I recall correctly, jQuery UI 1.8 introduced a few BC issues, so make sure to check the changelogs (http://jqueryui.com/changelog/1.8/ and http://jqueryui.com/changelog/1.9.0/). This blog was written for v1.7. There are some minor differences, and if you read the comment stream here, you should find what you need. I will upgrade everything on this blog as soon as I get time. Thanks for reading!

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  21. #21 by elie on September 18, 2013 - 9:09 am

    Hello sir,
    thanks a lot it been while I’m searching for a good example.
    I’m adding your exemple to a dynamic table
    so i will have the Zipcode, City & State duplicated in each row with different id example:
    Zipcode1, City1, State1
    Zipcode2, City2, State2
    Zipcode3, City3, State3
    so how can i make the autocomplete in Zipcode1 able to fill up the info for City1 and State1
    and for Zipcode2 able to fillup the info for City2 and State2,……..

    thanks a lot again for that amazing code

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  22. #22 by Durairaj on October 10, 2013 - 11:50 pm

    Hello sir,
    Nice article. I am new in php. I am developing web application. I need to use this auto fill concepts. I don’t know How to do this. so, i request you to send the source code of Populating Related Fields to my mail. I browsed over google. But, i did not get required information about this autofill concept.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -2 (from 2 votes)
  23. #23 by Anthony on October 11, 2013 - 2:30 pm

    @Durairaj – all of the code is already available for you on this website and related sites (jqueryui.com jquery.com).

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 2 votes)
  24. #24 by RHF on October 13, 2013 - 9:41 am

    Very nice blog with excellent information and examples – just what I was looking for.
    Have you considered incorporating AJAX into one of your examples?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  25. #25 by bhargavavardhan on November 15, 2013 - 2:17 am

    i want to use two autocompletes in one page. two are other table one is category table and second one is city table how can i use two autocompletes in one page please suggest me
    i am waiting for your reply

    thanks in advance

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  26. #26 by Andris on December 8, 2013 - 7:13 am

    Where is ‘term’ defined for $_REQUEST['term']? Can not understand.
    In input form see

    Enter your zipcode:

    and no ‘term’ here

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  27. #27 by Anthony on December 9, 2013 - 12:59 pm

    @Andris, The request variable is sent up by jQuery via AJAX (XmlHttpConnection).

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  28. #28 by Sam on December 27, 2013 - 6:58 am

    How can I made the results clickable?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  29. #29 by Rickson on January 10, 2014 - 4:04 am

    This worked really well. Thanks a lot, you are very generous

    VA:F [1.9.22_1171]
    Rating: 3.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  30. #30 by Ingo on March 4, 2014 - 6:49 am

    Hello Anthony,

    your script works really well, thank you. But i have a problem, because i need to get a second variable in the jQueryAutocompleteRelatedFields.php. To can take a preselection, like

    $st = DB::singleton()
    ->prepare(
    ‘select city, country, region, postalcode ‘ .
    ‘from world_cities ‘ .
    ‘where city like :citycode ‘ .
    /* ‘and where country = :k_country ‘ . */
    ‘order by country asc, city asc ‘ .
    ‘limit 0,50′);

    How i can realise this, with $k_contry = $_GET['k_country']; it doesn’t works?

    Thanks a lot in advance and best regards,

    Ingo

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  31. #31 by Marelyn on April 28, 2014 - 3:51 pm

    About Populating Related Fields.

    Imagine there are a same zipcode for several cities.
    So, in the autocomplete result list, we have we have several code but no indice to choice the correct city.

    How to add an value in result list below zipcode but should not entered in input zipcode ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  32. #32 by Anthony on April 30, 2014 - 2:21 pm

    @Marelyn

    Thanks for replying. The example does this for you already, however I do see confusion where the user might not select the zip with the intended city association, or perhaps the zip code was distinct and only shows up once in the result set. To make it more clear to the user, you should format the label so that it includes both the zip and the city, and perhaps the state, in the result label. You might have to alter your query so the results are distinct by zip + city and not just zip. This way, the user can select the zip that matches the expected city, and the related fields should populate correctly. In other words, the zip code would show up in the results once for each city associated, but the city would be printed next to each zip code, so there would be no confusion when selecting it.

    You could also group the zip codes by city and state to help make it more clear as to which city each zip code belongs to, in the results that are returned.

    Hope that helps.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  33. #33 by manas on May 3, 2014 - 5:50 am

    Nice tutorial on Auto Search
    You have covered all.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  34. #34 by ali on May 12, 2014 - 7:28 am

    Very helpful

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  35. #35 by mohamed Royal on May 29, 2014 - 2:17 am

    how can I download the complete database and also php file

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  36. #36 by Anthony on May 29, 2014 - 1:32 pm

    @mohamed

    If you read closely, you will find a link to the Zip Bundle. This has everything you have requested.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  37. #37 by Marelyn on May 31, 2014 - 1:10 pm

    Thank’s Anthony
    i’ve somes difficulties to put my code jquery.php in a tpl file because i’m using smarty.

    Could you help me please ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  38. #38 by Marcos Rigaud on June 14, 2014 - 2:43 pm

    Thanks!!!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  39. #39 by Andrew on June 15, 2014 - 5:31 pm

    Hello all. I cannot get auto-suggest to work like it should. I am using a Debian based host, MySQL as the database, and apache2. I have installed php5 and libapache2-mod-php5 to ensure that php can communicate with my database. I have edited the connection settings in the PHP file with my user name, host IP, password, and database name. I also installed the package of: php-services-json to see if that would solve my issue. I know it is not my browser because this site’s examples load and display just fine. On my site I only see what looks like a loading icon in my text box. For simplicity’s sake I downloaded the .zip file hosted on this site just to make sure there was nothing wrong with what I had typed.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  40. #40 by Anthony on June 16, 2014 - 10:25 am

    @Andrew

    If you are getting a spinner / loading icon and nothing else, it probably means that there was a javascript error. This is likely because the server did not send back proper JSON. Look at the response from the suggestion script and make sure it returns data as expected. It may have an error or other code in your response that will cause the JSON to not be parsed. If you just set up PHP make sure your timezone and other settings are correct in your INI. Hope that helps.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  41. #41 by Massimo on June 26, 2014 - 1:39 pm

    Finally!! Code simple and perfectly working! You are a star!! :-))
    Thankyou so much!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  42. #42 by Disaදිසා on June 29, 2014 - 10:51 am

    thank you sir,
    Finally I found great tutorial about jquery autofill with many features in crystal clear format.
    thanks again sir….
    from Srilanka(greatest lions land).

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
  43. #43 by Srdjan Gajic on July 27, 2014 - 3:47 pm

    Dear Sir,
    What to tell you. You are a God, because you just saved my life with this autocomplete sample. I’m migrating software from Visual FoxPro where this is so trivial to WEB where this was my nightmare, and this is just what i searched for.
    Thank you a lot!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  44. #44 by Igor Chishkala on July 29, 2014 - 3:10 am

    Many thanks! This article double great for me. First one – US ZIP MySQL base second one – jQuery Autocomplite. It’s amazing! Thanks again

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
(will not be published)