Ajax Search. I love ajax very much. I have expressed my feeling by writing tutorial about ajax here, here, here and here. This tutorial shows how to create ajax search form using PHP, Jquery and Mysql. When you click the search button or press enter key the results will be displayed on the same page and without refresh page process. This is very interesting and simple. Take a look at beautiful live demo.
Here we use database of wordpress, wp_posts table is used.
HTML Page Ajax Search
We create an input text and button to facilitate users to search tutorials. Also we create a list to display the search results.
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <input type="text" id="search" placeholder="Search Tutorials Here... Ex: Java, Php, Jquery..."/> <input type="button" id="button" value="Search" /> <ul id="result"></ul> </div> </body> |
JavaScript
We specify so that when users click button or press enter key the process of searching data begins. Here we use click and keyup event. As usual we use ajax function to perform data change in the background.
To limit when users input nothing but click the button or press enter, we create simple checking using if.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ function search(){ var title=$("#search").val(); if(title!=""){ $("#result").html("<img alt="ajax search" src='ajax-loader.gif'/>"); $.ajax({ type:"post", url:"search.php", data:"title="+title, success:function(data){ $("#result").html(data); $("#search").val(""); } }); } } $("#button").click(function(){ search(); }); $('#search').keyup(function(e) { if(e.keyCode == 13) { search(); } }); }); </script> |
PHP Code
Database configuration file used in this tutorial. Adjust the server location, username, password and database name
file : db.php
|
1 2 3 4 |
<?php mysql_connect("localhost","user","password") or die("error koneksi"); mysql_select_db("database_name") or die("error pilih db"); ?> |
This is the code that searchs articles based on the user input and brings the results in ajax search way.Once again we performs checking using if to ensure when no data found it will give an output “No Tutorial Found”
file : search.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php include "db.php"; $title=$_POST["title"]; $result=mysql_query("SELECT * FROM wp_posts where post_title like '%$title%' and post_status='publish'"); $found=mysql_num_rows($result); if($found>0){ while($row=mysql_fetch_array($result)){ echo "<li>$row[post_title]</br> <a href=$row[guid]>$row[guid]</a></li>"; } }else{ echo "<li>No Tutorial Found<li>"; } // ajax search ?> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style type="text/css"> #container{ width:800px; margin:0 auto; } #search{ width:700px; padding:10px; } #button{ display: block; width: 100px; height:30px; border:solid #366FEB 1px; background: #91B2FA; } ul{ margin-left:-40px; } ul li{ list-style-type: none; border-bottom: dotted 1px black; height: 50px; } li:hover{ background: #A592E8; } a{ text-decoration: none; font-size: 18px; } </style> |
very neat
what i have been looking for
😀
yaaay!
thank you Agung
For Kendall, a runner, the problem is her muscled calves; for Justine, it’s high arches that make it hard for her to get her foot into some boots.”We weren’t aware of how many fit issues there are,” says Kendall, who organized fit workshops with local women as part of her research.