A WordPress plugin for adding Autocomplete functionality to your blog search
Plugin download
Brief information
Adding autocomplete functionality to the blog search input field. The values provided are the tags and categories used in the blog.
Long description
This plugin adding autocomplete functionality to search input field. It is using core jQuery library as well as autocomplete jquery plugin from http://www.pengoworks.com/workshop/jquery/autocomplete.htm
This plugin requires zero configuration, but since version 1.2.0 there is admin screen where you can enable the extra ‘number of matches’ next to each option. You just need to activate and it’s ready to be used in the blog. The plugin is tested with WordPress 2.6.5, but until there aren’t big core changes, it sould work for all future releases. I don’t have information if this plugin will work with older versions of WordPress, but for sure it is working with 2.6.x. The last version 1.2.0 is tested on WP 2.7.1.
New in 1.2: This version could display number of matches found in the blog.
New in 1.2.1: Small fix for table prefixes and adding autosubmit once the item from the list is selected.
New in 1.3.0: Added result type option in admin. From now on you can choose which type of results will be displayed.
I would appreciate if you write an review/post in your blog with a link to my page: nik.chankov.net.
Thanks to
- jquery.com
- jQuery Autocomplete Plugin
- Dave Ross for the hint with name selector 🙂
Installation
This section describes how to install the plugin and get it working.
- Download the plugin from WordPress repository
- Upload `autocompleter` to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- {Optional} If you want to change the apperience of the dropdown, just play with autocompleter.css in the plugin folder.
- {Optional for 1.2.0} Go to Admin area under the Settings section. There is Autocompleter menu from which you can extend the plugin with ‘matched items’ option.
Frequently Asked Questions
Why this plugin is useful for users of your blog?
It’s useful because they can easily check what themes you writing for, and this way they could find the desired article more easily.
Is it possible to use it with non standard search like Google Custom Search Engine or similar?
Well, depends. Current version (1.1.2) reqires the name of the input field to be “s”, so if your search field has such name, there is no problem at all.
Is it heavy for my blog?
No, it selecting results from two joined tables, and it is not heavy at all.
Is it secure?
Actually it’s escaping the search string with functions provided from WordPress, so it is secure as WordPress.
Use contact page for support and other questions. Thanks!
Screenshots
Your problem is called Cross Domain scripting. Long story short you cannot request JS resources from another domain (while your domain.server.com and server.com are different domains).
Although there are some methods to do this, but definitely this cannot be done with my plugin.
Nik,
It’s not really Cross Domain Scripting.
It’s Cross Sub-Domain… I think I might have a solution for this that’s regardless of your plugin. Will let you know.
Thanks.
I’ve installed your script on my blog with Concept X theme, and not work. Not work in the search integrated in the header of the theme, and not work in search widget. 🙁
Most of the cases like yours is because you have some plugin in your blog that includes jQuery after my plugin’s code and this reinit jQuery object and autocompleter’s hooks.
Possible solution is to disable your blog’s plugins and see which one cause damage and simply to edit it’s code to remove the jQuery link, or disable it for good.
Is there an automatic posting tool for wordpress blogs to put on auto pilot? We want to post news about diabetes as it surfaces the net.
I am using this plugin and it works great. However, just recently I noticed that newer posts are not showing up in the auto complete drop down options. However, if I hit enter and go to the search screen they do show up.
Does it take autocompleter a while to cache new results?
Hi Paul,
there is no cache in that module it loads what it finds in the database.
Are you searching for the words in title or you are searching for any words in the post body?
Could you send me trough contact form your blog with the phrase which cannot be found?
Yo Nik, i don’t like your style. Your comment unsubscription links have some tricks (password). It’s not a good idea man.
(http://nik.chankov.net/?wp-subscription-manager=1&email=blabla%40gmail.com&key=51cba4f2b3ff93ee83558404c3e3c591)
Caner, comment subscription is a module and fortunately or not it’s not mine, so I am just using it and I don’t have any clue what are you talking about. As far I can see your mail is not in the list (anymore)
Hi Nik,
Sorry for my delay in responding. I’ve been in a dizzying pace to finish development for my clients launch next week!
I would share the site, but it is by subscription, and I don’t have their permission.
I am searching by only post title. I should add, that I altered the wordpress search to only search by Post Title before installing your plugin.
A little more info: Your plugin was working great, showing results for posts added just minutes before a search. Then one day it didn’t show any posts from an entire day. That is when I wrote here.
But by the next day the new posts were showing. So I’m thinking it must have something to do with another plugin, or perhaps a piece of code i have added.
Knowing that your plugin does not rely on a cache, I can at least start to look for other issues.
Thanks for the great work, and quick response.
Hi may I suggest a small correction in the autocompleter.php :
/* Add the autocompleter css */
function css_autocompleter(){
//Style
wp_register_style(‘autocompleter’, WP_PLUGIN_URL.’/autocompleter/autocompleter.css’);
wp_enqueue_style(‘autocompleter’);
//wp_print_styles();
}
add_action(‘wp_print_styles’, ‘css_autocompleter’);
I remove the wp_head and use the wp_print_styles instead. I do this because sometimes it create some incompatibilities with other plugins!
Thanks for this great plugin!
Is there a way to have the plugin show “Nothing found” if no results are found? Right now I have people telling me they’re frustrated because they think it isn’t working when they start to search but nothing shows.
Paul,
The idea is really good. I will try to implement it in the next version.
Hi great plugin Nik thanks for this. but i have something to ask how can i have your plugin to work on two different inputbox? {jQuery(“input[name=s]”) like this one how would i declare this with another var name=where? heres the URL of my site:http://www.youtradeit.com/
Love to see the City or State inputbox to autocomplete also thanks and nice plugin
Hi Elland,
You have to change the plugin’s code for this. The the main purpose of the plugin is to help the user when he search something in the blog. Where is not a search 🙂 Also I don’t believe that City or State is default blog search functionality.
yeah its not a defualt blog search function i just want to an autocompleter with another textfield that could search my database
Pingback: Förbättra sökfunktionen i WordPress - Andreas Karman
Would it be possible to use the same technique for populating form fields?
Hi Thomas,
jQuery provides very good Autocomplete UI extension. You could use it very easily.
Nik – first of all, *fantastic* plugin… yours was the third I tried in an 18 hour marathon work session, and the *first* that just -worked- right out of the box.
Now, I know you said last year that it wasn’t really your intention to add on functionality that would allow for the user to click/select a result and go straight to that page… but that would be so *very* useful in many situations, especially for mobile applications.
If we can’t talk -you- into doing it, could you maybe at least offer some help/suggestions for someone willing to risk modifying your plugin on their own?
Okay, so I just realized that with the autosubmit on and page/post selected, that it -SHOULD- work the way I just requested…
But for some reason it’s not?
Hi there,
Just in case anyone else is struggling, after a lot of debugging, I found that this plugin clashes with the popular WP Events plugin: http://wp-events-plugin.com
The reason for this clash is that the events plugin uses the jQuery UI Autocomplete function, which shares the same jQuery plugin name.
This can be fixed fairly easily, by changing the name of the jQuery plugin on lines 6, 462, 492 and 500 of jquery.autocomplete.js and line 67 of autocompleter.php to something else (eg. WPautocomplete). This avoids the clash, and it works fine.
Hope this saves some other people the headache I had!
Phil
Hi, me like your plugin but “autosubmit” don’t work when you chek it on in admin-panel. This option is not work: 1.3.5 [09 Mar 2011] – added posibility to skip search result’s page and goes directly to the post or page. See Description tab for more details.
Wordpress 3.3
This option is most important. Please help me, I have spent 4 hours, but and haven’t solved a problem
Hi, install the new version 1.3.5.2 from the WP site. Thanks for letting me know for this problem.
Thnx, but on wp site no have new 1 3 5 2 verion of your plugin, on “changelog” you write about new version but 1 3 5 2 iit impossible to download
Yep, the package 1.3.5.2 can be downloaded, I probably messed something because the version should change. I will try to fix it.
Any advice on getting the automatic form submission when a tag/category is selected and clicked to work on WordPress 3.3.1?
Pingback: Wordpress bilogunuz » Autocompleter
I’m looking Elland’s feature of autocomplete searching in a custom field of cities. Did you get it working?
Hi,
I have installed this plug-in without any error but I can’t find any widget to work in and I even tried “acpd_display($acdp_title);” directly in php code.
none worked.
Cheers,
-Tony.
the plugin apply directly on Search field in your theme. Start typing something and it should display items at the bottom. If it’s not show anything, probably there is JS error.
Really nice plugin, Nik. But I got one issue with it though. Is it possible for a category template to narrow down the search to just one category instead of all the categories. I tried adding a hidden input field with a value of my category ID number and a name of cat in my search form, but it doesn’t work with Autocompleter. Is there some way to tweak the code in your plugin to support just one category? But only for one page? In other words, the rest of the site would have a standard search form displaying all results.
hello 🙂
I wish to know how to make the search input to find only the match of the first word, and no other matches inside a word.
Example: if typing the fist letters “th” for a word “thinking” and my pages titles are “thinking”, “marathon”, the search results will find me the the “th” inside the word, and i don’t want it to happened… i want it to find only the first word at is beginning.
Annoying that it puts a small link at the bottom of the page.
You can always deactivate it from the admin. 🙂
Hi there, I’m using this plugin, but on my theme it doesn’t work, and on Twenty Ten everything works fine. help.
Great plugin, but one major problem. On the WP-admin plugins page, your plugin makes all the other plugins link to YOUR settings page. I can no longer get to the settings page of all my other plugins. They all point now to: http://*****.com/wp-admin/options-general.php?page=autocompleter/autocompleter.php
Please fix.
Thanks, David
What file is this code located? The CSS is inline and I want to change the top pixel value.
Thank you in advance. Nice plugin. Works with twentythirteen theme as well!!
div class=”ac_results” style=”position: absolute; width: 192px; left: 0px; display: none; top: 183px;”
Hi Nik, I tried adding a hidden input field with a value of my category ID number and a name of cat in my search form, but it doesn’t work.
Hi, error is
div class=”ac_results” style=”position: absolute; width: 192px; left: 0px; display: none; top: 183px;”
hi.
“div class=”ac_results” style=”position: absolute; width: 192px; left: 0px; display: none; top: 183px;”