Adding autocomplete field for search in Wordpress
October 10th, 2008
Added a nice Autocomplete field of the search box in that blog /top right/. It’s really nice to have and I really enjoyed doing it.
I followed that article: How to: Create an Ajax-based Auto-completing Search Field for your Wordpress Theme, but instead of using suggested js code, I’ve used Script.aculo.us Autocomplete way.
I really enjoyed and I hope you will like it too.
Update: I’ve wrote a plugin for this: nik.chankov.net/autocompleter/. Enjoy!
Loading ...
can you share how you done it with us
I followed the article mentioned in the post
i cant make it work, how you include the js in the html file ?
Yep this guy didn’t explain this.
I’ve added the
can i look your js file? what is the name of it?
ok, what I’ve did:
1. Check if you have prototype included in your html, if not include it with
2. I added following code into the header.php:
<script src="/wp-includes/js/scriptaculous/dragdrop.js" type="text/javascript"></script>
<script src="/wp-includes/js/scriptaculous/controls.js" type="text/javascript"></script>
3. I’ve added this as well, because this is the colorization of the dropdown afterwards:
4. and I’ve added this javascript after the form:
//<![CDATA[
var contact_name_auto_completer = new Ajax.Autocompleter('s', 'tag_update', '/wp-content/themes/genkitheme-10/gettags.php', {})
//]]>
</script>
Which doing the actual job.
5. I also changed the second and the third line of the php file, because with scriptaculous the post param was $_POST['s'].
so instead of:
$search = htmlentities($_POST['search']);
I have:
$search = htmlentities($_POST['s']);
6. if you copy and paste the form from the example above, remove onkeyup=”request(this.value);” callback, because with scriptaculous it’s not needed.
Hope this is much clearer now.
Thank you very much Nik
Thank you very much, one last question nik, there is a bug in the php file that the other guy’s. for example if i write something in the input and delete it, it displays all the tags in the database. but in your site this bug is not exist. how you managed to do it?
I think this is because I am using Scriptaculous rather than suggested in the original post. Anyway, this is the content of my php file:
if (isset($_POST['s'])) {
$search = htmlentities($_POST['s']);
} else $search ='';
$db = mysql_connect('localhost','user','password'); //Don't forget to change
mysql_select_db('database', $db); //theses parameters
$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req)){
echo '<li><a href="#">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
?>
Hope this helps
thx for your blog
http://www.streaming-gratuit.net
This is an interesting and useful plugin. Is it compatible with wordpress 2.6.3?
Thank for this very usefull code!!!
Thank you:) it’s very usefull code:P