Search Bar - Now with Ajax! (Preview)

[tarnfeld]

Hey
You may remember me from such plug-ins as http://community.iwebkit.net/viewtopic.php?f=16&t=339 and now, i am back!

There has been one or two topics based on searches around the forum.. and how to use one, and specifically an aax search, so i built one! I have a demo, and screens.

Screens


P.S. The search button is purely cosmetic

You can take a look at my demo here: http://tarnfeldweb.com/dev-kit/ajax-search.html and tell me anything i could improve

Oh and by the way... it searches as you type: I currently have the following search terms in my database

Google

Bing

Yahoo

Ask

Download
http://tarnfeldweb.info/dev-kit/ajax%20search.zip
Please read the README.TXT file

How to modify the php search for your database:
Quite a few people has asked, how can i modify this for my already implemented database? Well here is a hopefully useful short tutorial.

My database, has the following fields:

id (auto increment)
name
url

And you can see with this php (commented) how these fields are taken into consideration:

Code: Select all

$sql = "SELECT * FROM `pages`
           WHERE `name`
           LIKE \"%"
           .$_POST['query'].
           "%\" ORDER BY id ASC;";

(Don't separate this out onto lines in your actual code!)

Lines commented:
1) Declaring the mysql query statement and SELECTING *(all) FROM the table `pages`
2) Where the field `name`
3) .. is LIKE
4) %(wildcard) POSTED QUERY %(wildcard)
5) Order rows by their ID in the database, ASCending

The use of wildcard, allows anything before or after the query, this is the real 'search' part.

Now we return all the rows in the database (search results) in a nice friendly format, that the good old jquery POST asked for

Code: Select all

if(mysql_num_rows($result)==0){
      echo("<li class=\"textbox\"><p>No search results matched your query</p></li>");
   }
   
   else {
      while($row = mysql_fetch_array($result)) {
         echo("<li class=\"menu\">");
            echo("<a href=\"".$row['url']."\">");
               echo("<span class=\"name\">".$row['name']."</span>");
               echo("<span class=\"arrow\"></span>");
            echo("</a>");
         echo("</li>");
      }
   }

Lines commented again:

1,2) If the number of rows returned is 0, echo on the page that no results were returned
3) Else do the following:
4) For each item in the arrayed rows, returned by the search SQL statement, do the following:
5) Make a new <li class="menu">
6) Make an <a> which links to the url that is stored in the database for that row
7) Echo out the 'name' field stored in the database for that row into an <span>
8) Shove in an arrow
9,10,11) Close it all off


I hope this is any use to you? I dont really want to explain it even more.. but here is a tip for searching in more than one field in your database:

Code: Select all

$sql = "SELECT * FROM `pages`
           WHERE `name`
           LIKE \"%"
           .$_POST['query'].
           "%\"
            OR
           `othername`
           LIKE \"%"
           .$_POST['query'].
           "%\"
            ORDER BY id ASC;";

Simply use the "OR" operator in your mysql statement You can use as many as you like!

[crmunro]

Genius! thank you sooo much! Should save me a fair few hours of work

So I should be able to modify it to work with my mysql db tables and display the results in the music store list, right?

That's fantastic

[tarnfeld]

Haha thanks, only took me about 40 mins...

If you add me on some kind of IM (look on my profile) i will help you modify it for your table

Tom

[crmunro]

I added you, cameron.99@hotmail.com- when will you be on?

[tarnfeld]

I added you

[GeoNomad]

Very nice! Excellent work! I will have to add that to my Pocket History app. You realize you are making more work for me with this kind of thing. I had been thinking about adding Ajax to the search, but was too lazy. Now you have shamed me into it.

Tip:



You probably know this, but others reading this thread may not. You can change the Return key on the iPhone keyboard to Search or anything else you like by adding title="Search" to the <input type="text tag and surrounding the inputs with a <form></form>. The last part is lame, but necessary.

Peter

[tarnfeld]

Thanks
No, i didnt know that... i do now

[tarnfeld]

You can only do title="Search" not anything else

[GeoNomad]

You can only do title="Search" not anything else

Funny I hadn't tried anything but Search and Go.

"Go" also works.

I wonder what other words work...

[tarnfeld]

you wouldnt need to put Go as thats default

[Jon889]

I'm not sure why but if I type any single letter(say z) then it brings up all four search engines??

[tarnfeld]

This is a bug with the .keypress() event, i know about this but it can only be prevented by using the .change() event but it requires the browser to unfocus from the element, like clicking the search button

Basically it doesnt pick up the last character, so typing 1 in will result it searching for nothing so it would return everything.

[Jon889]

can't you unfocus and then refocus using javascript?

Also could you go through the code (in the HTML and PHP file) with comments like you did in my thread in Bugreports?

It would mean I could understand it a lot better, which I really want to do.

If you don't have time then it's no problem, but I'd love to know how it works

[tarnfeld]

Basically - When you type in the textbox, it posts the text in the textbox to the php, which then checks the database for anything that contains that text - at which point returns an array of the rows (this is standard mysql now) and then for each item in the array it sends back to the index.html file which posted the data to the php all of the html needed

[Jon889]

Code: Select all

$.post("search.php", { query: term },
                  function(data){
                     $('#results').html(data);
                     $('#spinner').fadeOut();
               })

I don't really understand this line(s) (I'm sorry to be picking your code apart). I thought $ was a shortcut for getElementById/Name. So what is the $ referring to in this line?

Also is the data variable what is returned by the PHP script?

[tarnfeld]

$ calls a jquery function, so $('el') will call the function, and it will pass 'el' to it and get the elements object?
That code you have there... here it is commented

Code: Select all

$.post("search.php", { query: term }, // Declaring the php file, and passing the search query to it
                  function(data){
                     $('#results').html(data); // Putting the results from the php search file into the div results
                     $('#spinner').fadeOut(); // Fading out the progress spinner
               })

[Jon889]

That's what I thought it was, but in $.post your not passing anything to it(there's no (el) after the $)?

Thanks commenting it, your awesome !

[tarnfeld]

I dont know, i just know how to use jquery - it works and thats all i know haha

[rasknight]

can you give me a guide to add results?

[tarnfeld]

You got to make a database
Fields:

id (auto increment)
name
url

Or you have to modify the php accordingly

[rasknight]

I have a database, but how do I edit it?

[tarnfeld]

I have a database, but how do I edit it?

I updated my post

[Sterling]

Awesome! I got this to work with minimal SQL tweaking thanks!

[DaBomb1022]

yes thanks! got it working on webjax.co.cc/search

[rasknight]

I still dont know how to create results

[tarnfeld]

I still dont know how to create results

add me on some kind of IM (look on my profile)
I don't want to clutter up this post with peoples MYSQL problems

[crmunro]

speaking of which... I still haven't got my server playing nice D: D: the one thing Apple never really did well- xserves :/

[tarnfeld]

Hmmmmmmmmmmmmm

[crmunro]

Okay. I give up on apple servers, useless things. I have a Windows SQL server being set up overnight, tomorrow I'll get the xServe and the Windows server talking, and then send you the link. Hopefully it works *Crosses Fingers*

[tarnfeld]

Hahaha!
Why not shove together a linux server, from a few old bits of hardware (or old mac) and a simple linux OS server version? haha

[rasknight]

Can you add me? jjjacke@hotmail.com

[tarnfeld]

I accepted you, ahh i wondered who that was!

[crmunro]

haha I'd like to but I'm not allowed to

[tarnfeld]

Ah shame!

[tarnfeld]

Sorry for any users who experienced a mysql connect error on my demo, moved hosts and had to change database prefix and stuff

[Christopher]

it's really awsome looking tarnfeld. congrats

[xrosoft]

anyone get this to work with news on iforum becuase i cant get it to work

[tarnfeld]

Have you followed my instructions above ^ to connect to the table and search?

[xrosoft]

ya but i still cannot get it to search the news

[tarnfeld]

PM Me your code, or your IM address and i will sort it out.