Today I added a Live Search (or autocomplete) plugin to my blog and I’d like to create a short tutorial for how you can add Live Search to your WordPress blog.
small payday loans very cheap
- Login to your WordPress Dashboard and add this plugin “Dave’s WordPress Live Search”
- Activate the plugin.
- Go to Settings -> Live Search
- Decide how many results you want to display (I set mine to 5)
- If your search is near the top leave the direction as “Down” (you may try experimenting but most likely leave as “Down”)
- Check “Display Post Excerpt” and leave the other 3 unchecked
- Leave the default style as gray.
- Save Changes
- Most likely the width of the search box will be off so go to Plugins -> Editor and select “Dave’s WordPress Live Search” from the top right drop down.
- Click daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css from the list of plugin files.
- Change the width in ul.search_results to match your search box.
- Make any other style changes you’d like and click update file.
- That’s it! You now have a working live search box!
If you want to know more about this plugin, see http://wordpress.org/extend/plugins/daves-wordpress-live-search/
Another cool enhancement is a new indicator graphic, for example from: http://ajaxload.info/
You just have to rename it to indicator.gif and put it in the right place. Maybe you have to overwrite the position in your CSS with something like:
#search_results_activity_indicator{
left: 1306px !important;
top: 30px !important;
}
You can see it in action on my site!
Thanks Torsten!
I’ve downloaded a new indicator graphic and replaced it with the graphic found at:
wp-content/plugins/daves-wordpress-live-search/indicator.gif
I’ve also edited the stylesheet at:
wp-content/plugins/daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css
to update the indicator margins/position. Here’s the code I used for my site:
#search_results_activity_indicator{
z-index:999999;
margin-top:10px;
margin-left:-5px;
}
Looks great!