Rafael Dohms

July 16th 2006 11:30 pm

Developing an auto-complete script with AJAX/PHP

22 Responses to “Developing an auto-complete script with AJAX/PHP”

1. Lee on 09 Aug 2006 at 19:24 #

   Checked out the live demo, worked great apart from the fact that it seemed to be case sensitive. Example typing in “Pens” would bring up “Pensando” but “pens” wouldn’t

2. Rafael Dohms on 09 Aug 2006 at 19:40 #

   Lee,

   Thanks for the feedback.
   Thats actually a live demo restriction, i only applied a simple pregmatch with case sensitive implications.
   If you were to use the script for other purposes the PHP backend can be adapted to any data source, like databases or txt files, using case insensitive matches.
   The live demo is just a simple example of how it works.

3. Oscar on 13 Sep 2006 at 18:45 #

   good performance and design considerations are discussed here:
   http://ajaxpatterns.org/Live_Search

4. Rafael Dohms on 13 Sep 2006 at 22:17 #

   Nice tip Oscar!
   Interesting material, I’ll look further into it.

   Thanks

5. Maxx on 08 Dec 2006 at 20:49 #

   Great JOB!! Thats almost what I’m looking for but I want the text to appear under the search box, kind-of like what a Google search result would look like. I will work on it and let you know if I find anything!

6. Maxx on 08 Dec 2006 at 21:21 #

   I can not get it to work on my test server or on my web site.

   http://romszone.com/test/example.htm

   When i goto the dmsAC.php page i get “Cannot instantiate non-existent class: domdocument in x:\xxxxxxxxxxx\test\dmsAC.php on line 27″

   any ideas? Thank you

7. Rafael Dohms on 08 Dec 2006 at 22:55 #

   Maxx,

   The part of the PHP Script taht builds the XML is based on PHP5, but you could adapt it to the tools PHP4 has.

   Thnx

8. Patejl on 18 Dec 2006 at 12:12 #

   Hello, it’s a nice script - good work! I only think the little disadvantage is that options are not only highlighted but also selected by “onmouseover event”. It could result in unwanted selection. The better would be if selection is activated only by “onmousedown event”.

9. santosh on 20 Dec 2006 at 6:40 #

   Hi,

   It’s not working on Mozilla Firefox.
   Error is :
   xmlRes.getElementsByTagName is not a Function

   this also not supporting- getAttribute(”id”)

   I am working on MVC architecture (JSP, JS,java,SQL). Please help……

10. Brian Irwin on 30 Aug 2007 at 20:45 #

    I had no trouble getting this script to work in IE, but using the identical page, I get nothing in Firefox. I can have them side by side on my screen. IE works, Firefox doesn’t. This is using your example.htm in both. Does anyone have a fix?

    Also, is it possible to have multiple instances on a page?

    In IE it is flawless. Very good work. This is the best looking autocomplete I have discovered.

11. Rafael Dohms on 30 Aug 2007 at 21:04 #

    Brian,
    That’s very weird, the script was released working in both IE and FireFox, even better on FireFox actually. Just tested it and it all seems well.
    If you could, install Firebug extension on your firefox e and check any errors, send them over to me and i’ll check out what’s wrong.

12. Brian Irwin on 30 Aug 2007 at 21:12 #

    I checked the error console of Firefox and found repeated instances of:

    Error: uncaught exception: Permission denied to call method XMLHttpRequest.open

    I don’t see any option in Firefox to change its security permission level to allow the request. Does anyone have a hack?

13. Rafael Dohms on 30 Aug 2007 at 21:40 #

    Brian,

    AJAX is not cross-domain, and that error is usually related to using AJAX to obtain data from other sites, like a request from my page trying to get an url in your site.
    This should not work on IE nor FF. Are you trying to access a remote site?

14. Brian Irwin on 31 Aug 2007 at 1:31 #

    Rafael, you seem to have the answer. I have several domain names parked to my main url. Since they all resolve to the same url and resolve the same programs, I am not always careful about which one I enter. I just tried the example program in Firefox, being careful to use the exact same domain name that I used in a hard reference in the code (I have your .js and php programs in deep subfolders) and it works perfectly. IE must be more tolerant.

    Thanks for your help.

15. Josef F.K on 24 Oct 2007 at 5:23 #

    Hi Rafael.
    I like your auto-complete script.
    Can it be used without php/mysql?
    The reason is that I have kids in a class so they can have they on message page. It is only a small (45) line, so php/mysql would be overkill.
    The lines like:
    Jody Masori
    So if I can use your script to put these inside the page that would be nice.
    Let me know
    Thanks
    Josef F.K

16. Rafael Dohms on 28 Oct 2007 at 20:30 #

    Josef,

    Well the script just need something taht returns a XML response, that you can easily find out its structure by looking at the script. If this is going to be a static XML return ou a php/mysql script, or ASP, or java, the script iginre, just as long as its a xml in the right format.
    So i guess you can use it because its just a frontend.

    Hope that helps.

17. Mikeymike on 07 Dec 2007 at 8:59 #

    Can I easily change separator from “space” to something else, e.g. “;”? I’d like the application to interpret “Company A” and “Company B” as two different auto-complete entries. In the current setup they are interpreted as 3: “Company”, “A” and “B”, because “space” is the separator…

18. Rafael Dohms on 07 Dec 2007 at 9:16 #

    Mikey,

    Shouldn’t be too hard to figure out, in the actual example there is a spot where i split the text in an array using ” ” (explode function), just replace that.
    That is actually just and example of use, you can easily rig the script to get database results and insert a node into the xml file for each result.

    Greetz

19. Henry Sturman on 16 Jul 2008 at 2:17 #

    Thanks you for this tool. One little thing I wanted to change was that after you select a value I would like the focus to remain/go back to the text field. So it would be easy to go on typing some more, without having to click in the field first to get the cursor back there. I don’t know why it actually loses focus, but I did find a solution after many tries, though I can’t explain why this works. (Using I.E. 7.) The solution was making these changes in dmsAutoComplete.js:

    1.comment out the me.hideDiv() in this part:
    //Sumir com autosuggest
    me.elem.onblur = function() {
    //me.hideDiv();
    }

    2.comment out the same here:
    li.onmousedown = function() {
    me.acChoose(this.id);
    //me.hideDiv();
    return false;
    }

    3.add this part just above the code of step 2:
    li.onmouseup = function() {
    me.hideDiv();
    document.mailform.friend_emails.focus(); // in my example my form is called mailform and the text field/area is called friend_emails; for some reason it did not work putting this line in the onmousedown code
    return false;
    }

    I also made some changes so that it does not replace the text in the text field, but adds to it, and some other changes to make it suitable for an online email sending tool (i.e. I made it more like gmail). In case anybody is interested (my email can be found on sturman.net).

    Thanks again for a nice tool.

20. Rafael Dohms on 18 Jul 2008 at 10:55 #

    Henry,

    Actually if you look at the beginning of the file you will see some variables set to do that, like true/false variables that can do what you like them to.
    Also you can do the focus thing editing the actual return function, so you can actually do all this without touching the backend.

    cheers!

21. Tom on 24 Aug 2008 at 10:34 #

    Thanks for a great script. I used another one in the past (can’t remember who developed it) and couldn’t find it so I googled and found yours. Your script is lightning fast compared to the one I used before. I absolutely love it.

    I have a small problem that I am hoping that someone can help me with. After the list is populated with data, I would like to allow the user to press the enter button to submit the form. I have placed the form tag in the html along with a submit button. When I select the item I want from the list and the input text box is filled, I am getting the javascript alert box.

    Instead of the alert box, how would I get the form to post? Thanks to anyone that can help.

22. Rafael Dohms on 24 Aug 2008 at 13:22 #

    Tom,

    If you look at the code you will see on the same page as the autocomplete html, there is a function which determines what it does when you choose an option, just alter this function to do a form submit. Also look at the varios options available to alter the script, everything is documented, but on look at the code will allo easy identification of options.

    cheers

Trackback URI | Comments RSS

Leave a Reply

Name (required)

Mail (hidden) (required)

Website