Uncategorized

PHP Ajax AutoSuggest Jquery Plugin

14 years ago
38 Comments
by Amit
1,343 Views
3 min read
Shares
    PHP Ajax AutoSuggest Jquery Plugin is another useful, lightweight autocomplete plugin for jquery plugin lovers with facebook theme 😉
first version of this PHP Ajax AutoSuggest Jquery Plugin plugin was developed in 2009 and posted on planet-source-code.com. which recorded 17888 downloads in one year and Best Code award too. good responce isnt it ?
First version was just plain autoComplete script with basic features, and looking at responce received, i thought to come up with its next version with bug fixes, features and configurable options so users can easily adopt it. so here i come up again with its jquery plugin version.
Hope to get good response.

PHP Ajax AutoSuggest Jquery Plugin

View Demo Download Source

Features

  • Can be easily Configured.
  • Facebook Theme.
  • Faster.
  • Themes can be changed easily with only few changes in CSS.
  • Tested in Firefox 3.6, IE 8, Google Chrome 6.0.
  • Lightweight, Available in 3 different sizes.
    • jquery.autoSuggest.js – 9kb
    • jquery.autoSuggest_minified.js – 5kb
    • jquery.autoSuggest_packed.js – 3kb

Change Log

  • Version 1.1
  • Added keyboard support.
  • Selection can be made with UP/DOWN arrow keys.
  • TAB key support for option selectection.
  • ENTER key support for option selectection.
  • Prevented form submission on ENTER key.
  • Extra parameters can be passed to server.php

Options

Option Description
ajaxFilePath This option will hold file path which will return options to ajax call.Default value is NULL.
ajaxParams If you want to send custom parameters to ajax file then you can pass all that parameters through this variable in single querystring. Default value is NULL.
autoFill If you want to fill the value under mouse/keyboard in the textfield then set this variable to true. Default value is false.
iwidth iWidth options holds desired width of suggestion list. Possible values could be
1) auto – Automatically adjusts with input fields width.
2) Any integer (Ex : 100px) – user defined
Default value is auto.
opacity Opacity of the suggestion list. It can be anything from 0.0 to 1.0
ilimit iLimit option holds number of results (items) you want to show in the suggestion list.
idHolder If you want to save id of selected item and want to pass it to next page for further processing then ‘idHolder’ is the thing you are loking for. enter input field name in this option. and autoSuggest plugin will automatically store id of the selected item in supplied field.
match This is additional option seen in only few plugins. now with this option you can tell autosuggest plugin which search criteria to use.
1) starts – Lists all the values that starts with entered text.
2) ends – Lists all the values that ends with entered text.

3) contains – Lists all the values that contains with entered text.

This plugin does not support Multiple instances which is actually a major development remaining in this plugin, making it support multiple instances will take some time as i need to make many changes and it will take some time and there are 1000+ script ideas bouncing in my mind to come out and occupy pages on this blog. so this feature will be added upon visitors responce and requests.
Also i have not tested this script in Safari, Opera, Firefox 3, IE6, IE7. i am requesting test results from visitors of this page in above browsers so i can make changes in CSS and javascript to make it compatible for above browsers.

Shares

You may also like

38 Comments

  • Hi Amit, and first, thank you for that great sharing of yours.

    I went by many autosuggest / autocomplete scripts within a week, and yours seems at last the closest to my needs and goals.

    Since you request test results on your demo, here is one from Safari 5.0.3 and Firefox 5.3.8 on Mac OS X : the only problem I met is the lack of up/down arrow keys selection.

    I would be happy to test your script on my own server, but I need a dump of your MySQL test table to fit exactly your code, and see if it works.
    Could you provide it to me/us please ?

  • Hi Patrik,

    Happy to hear that you find this script useful. i have updated download with few changes and SQL dump. i will test it in Safari and FF and will make changes. if u can test and fix it then it would great.

    • hurrreeeyyy…! its working in Safari 5.0.3 and Firefox 5.3.8. thanks for test results. and i will update demo soon. many thanks Patrik.

  • Hi Amit,

    Here is a little advice for users who, like me, use the ISO-8859-1 charset instead of UTF-8.

    Your AutoSuggest script does not work for people who try to search a word with accented letters in a correctly configured environment (webpage in ISO-8859-1 + SQL in latin1_general_ci).

    A solution to this problem is to convert the entered text into UTF-8 right into the SQL query.
    To do that, you’ll have to edit Amit’s “server.php” file, lines 36 to 38 :

    Replace each occurrence of
    like ‘”.$data.”%’

    By
    LIKE CONVERT(_utf8 ‘%”.$data.”%’ USING utf8) COLLATE utf8_general_ci

    Now if the visitor is looking for the word “éléphant”, he can either type “elephant” or “éléphant”, both should work.

    That modification will not fix the display of the accented letter (I’m still working on it :] ).

    • Hi Patrik,
      Many thanks once again for this valuable suggestion. you have already solved this problem 60%, i will also start working on letter display.

  • Hey Amit,

    We were seeing the down and up arrows move 2 rows at a time when using your script.

    Looking at the code, it looked like both the default button action and the scripted action were firing at the same time.

    We replaced line 58 in the jquery.autoSuggest.js with

    obj.unbind(‘keyup’).bind(‘keyup’, function(event){

    and the down and up events successfully fired only once. Hope that helps anyone else who is having trouble!

  • hi amit. im having a problem about this plugin. when i try to plug this to my page, it doesn’t run at all. I think its because of the query string. For example: index.php?menu=form .. did i missed something here? 😮

    • @LiDoNg Ghon
      If you have firebug installed, then please see the ajax request url and responce returned if any, if you are not able to find the problem then paste ur ajax request url here. or link to ur page will also do. i will take a look at it.

  • this is a really cool plugin! but i need 2 instances for 2 different textfields. can you give some hints what must be changed? i’m trying it all day but i think i dont know the really problem : /

    • Hi Thomas,
      Really sorry to say that, this plugin does not support 2 instances on same page. I am also new to jquery plugin development and dont know how to make plugin which can have multiple instances on same page. if u get success to have multiple instances for this plugin, it will be much appreciated and please do let me know so i can publish it over here with your name in development team.

  • I think this is one of the most significant information for me. And i’m glad reading your article. But wanna remark on few general things, The website style is perfect, the articles is really great : D. Good job, cheers

  • Hello, i think that i saw you visited my site so i came to “return the favor”.I am attempting to find things to improve my site!I suppose its ok to use some of your ideas!!

  • This is really interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to seeking more of your excellent post. Also, I’ve shared your website in my social networks!

    • Not sure, But i guess it will not work i havent added utf encoading to it. but i have modified this script to work with arabian language for my client if u need do let me know.

      • Hi Amit,

        I am relatively new to PHP and JQUERY,but I am trying to learn hard because i find it really interesting . I need some suggestions on how to load cities instead of countries in php. I have a page with a textfield and upon an event i should be able to get list of cities .For Example if i type in hyd in the textbox i should be suggested with all sort of cities starting with hyd. I do not have database of cities but i do have an excel sheet containing cities from around the globe? I do not have any idea of how to read from an excel sheet in PHP ,If i am able to read it then i should be able to get it done with ajax auto complete functionality.I guess i have scribbled a lot over here. Any suggestions will be sincerely appreciated.

        Thanks,
        Murtuza

        • U need to import that excel file to mysql database or second way could be to convert that file to csv format.

  • Hello Amit i am getting a problem when i use any perameter by get that time this auto suggession not work please give me suggesstion for this

    Thanks
    Deepak

    • humnn…u r right….it doesnt work with url parameters. I am amazed whats causing problem ?? I will take a look at it, Is it urgent ??

  • yes you can see my website i am unable to do work because of this problem please do it urgent if you can

    Thanks,
    Deepak

  • hi
    how can we use it for more than 1 tables and fetching data in clubbed manner…
    you can see the example of justdial.com
    its fetching both category and company matching search term…

    any idea… how to do 😕

  • i’ve tried ur sample, but when i have 2 input text box and both of them contain “autocomplete”,,, have little problem,,,
    when i type on first textbox, the list show on the right location (input type location)
    but when i typed on the second textbox, the list shown on the last textbox i typed… 🙂
    btw sorry for my english,,,

  • hi, Amit,

    I’m using your plugin. But I have a problem. It’s ok to add new data to mysql. But when I want to edit my data with your plugin, I cant pass the ids into hidden textarea… I put the screenshot about my work.

    here is image : http://www.freeimagehosting.net/1tiyr

      • Ok, Let me explain it clearly.

        I can add new data to mysql table using your pluggin.That’s ok.
        I’m having problems fetching data back from mysql table and into the hidden text area that sends ids to the post page which was added into the plugin.

  • Interesante el script , ya lo use me resulto demasido util acerca, no se si le ayudara yo llegue hacer varias instancias para un proyecto que necesitaba tripulante y capitan conseguir sus nombres, lo unico que hice es crear un nuevo stylo para nueva instancia y crear otros suggest y con le mismo archivo de server.php y acerca de los caracteres especiales , para la busqueda utf8_decode y para mostrar los datos utf8_encode

    • Querido Marco, puede usted por favor traducir su problema en Inglés. Yo no entiendo spanich. Por lo tanto, será imposible para que te ayude. Si alguno de su amigo sabe Inglés y luego pedirle que traduzca su problema en Inglés.

  • How could I have missed this blog! Its incredible. Your design is flawless, like you know exactly what to do to do make people flock to your page! I also like the perspective you brought to this subject. Its like you have an insight that most people havent seen before. So great to read a blog like this.

  • How can use this plug-in more than one time at the same page. I cloned the mainholder and inputbox vars but not worked.

    • Yasin, Sorry to say but this plugin version does not support multiple instances on same page. Next version would support this feature.

Shares

Let your friends know what are you reading

Share this post with your friends!

Shares