www.webdeveloper.com
Results 1 to 6 of 6

Thread: Ajax search question and problem

  1. #1
    Join Date
    Mar 2013
    Posts
    4

    Ajax search question and problem

    Hello,

    Sorry if the request may sound dumb, but here it is.

    I want to add a search function to my website which would retrieve data from a DB. Also, I would like to make two inputs (two search fields) and I would like to get the results automatically after filling the second input (search field).

    Here is an example of what I want to implement. Check out http://fany.ro
    You can see in the upper part, on the right side, there are two inputs. One is Localitatea de plecare and the other one is Localitarea de sosire. Fill in Localitatea de plecare with Oradea, and fill in Localitatea de sosire with Sacuieni. After you will fill the second field, you will be redirected automatically to the results page.

    I'm not quite in the scripting area, though I have some knowledge, but I am only a beginner. I have searched the web for a tutorial or something like that which would explain a search type like this with two inputs and the other feature with the automatic search (redirection to the search results). However didn't find any info and I've been searching for hours.

    I have the two .js files of the above script but I don't know how to make the required connections. Help would be greatly appreciated.

    Here is the .js file for Localitatea de plecare:
    http://pastebin.com/MsdCBPdB

    and here is the .js file for Localitatea de sosire
    http://pastebin.com/7iBBs1Wt

  2. #2
    Join Date
    Nov 2010
    Posts
    1,090
    Localitatea de plecare, for example, calls on data from a file called getplecari.php so to use that code you would have to replicate that file.

    If you are interested in using jQuery the autocomplete is quite easy to use and well-documented:
    http://jqueryui.com/autocomplete/

  3. #3
    Join Date
    Mar 2013
    Posts
    4
    Thank you for replying.

    I went a bit through the suggested page. I am quite unsure on how to create two inputs for search, just like on http://fany.ro
    Plus, you get your results only after you fill the second input and not sure how to do this.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    good news:
    auto-complete is done without JS via the <datalist> tag and data attrib on inputs, you don't need JS for that half!

  5. #5
    Join Date
    Nov 2010
    Posts
    1,090
    bad news:
    datalist isn't even close to being cross-browser compatible
    http://www.quirksmode.org/html5/inputs.html

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by xelawho View Post
    bad news:
    datalist isn't even close to being cross-browser compatible
    http://www.quirksmode.org/html5/inputs.html
    good news: that chart is old. according to http://caniuse.com/#feat=datalist , it works in the top four browsers.
    obviously, it's not good for mobile, but neither is anything else, so no loss there.

    additionally, it's a good format for physically coding suggestions, even if it doesn't work on some browsers.
    using a 3rd-party script, you still need to hold the suggestions someplace, and datalist is the proper place for that.
    any script script can read the suggestions from the <datalist> and build their own suggestion interface just as they do now.

    if a script wants to steer you away from the open-source standard way of doing that into using some proprietary suggestion format, it's not going to last 5 years...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles