It’s been a while since my last post, and I’ve got a lot of great ideas to get down on blog, but first I’d like to announce a new version of jquery.suggest. Some new features include:
- Improved cross-browser compatibility (tested to work the same across Firefox/Safari/IE6/IE7)
- Cache bug has been fixed that caused suggestions to “forget” to hide
- Moved some stylings from JavaScript to CSS
- Cleaned up code, started heavy commenting
- Not exactly a new feature, but jquery.suggest will soon be on jQuery’s plugin page
For more information, please see this previous post. While the plugin works in Opera, it’s not perfect (which is why I didn’t mention it above) and I’m still working on it.
Download it here (example CSS here) and give me some feedback.
Your jquery.suggest seems to interfere with jqem (http://davecardwell.co.uk/javascript/jquery/plugins/jquery-em/0.2/) and jquery.autolineheight (http://www.ollicle.com/eg/jquery/autolineheight/) plugins. When used together with these plugins the suggestions box jumps back and forth on the screen and the mouse continuously changes and flickers. May be you could insert some $.jqem.stop() and $.jqem.start commands to your plugin to circumvent this.
Hey Peter:
First and foremost, great work on this plugin — it was just what the doctor ordered!
I just added an interesting feature to your Suggest script — not sure if you are interested in taking a look / migrating the changes. I had to relate what an end user selected back to a unique ID (for suggesting items in a dB table) so I added the ability to tell what ID the item you selected as the suggestion is in the dB. Shoot me an email if you want see the changes!
Thanks, Chris
Hey Peter,
Thanks for the plugin.
I also modified the plugin so I could specify a maximum number of items to show.
Here are the changes that I made : (you can edit this post so it shows up as code if you like)
At the bottom in the suggest function where all the options and their default values are specified, I added this line :
options.maxItemsToShow = options.maxItemsToShow || 10;
The default should probably be all items and not 10…
Where you loop to add the li’s to the list, I added this right before :
var maxLength = null;
(items.length > options.maxItemsToShow) ? maxLength = options.maxItemsToShow : maxLength = items.length;
Right after that, the for loop was changed from:
for (var i = 0; i
The plugin looks great, but I’m new using JQuery, how can I use it using java classes instead of PHP?
My mod for displayItems:
(maxItems is defined with the options: options.maxItems = options.maxItems || 15;)
function displayItems(items) {
if (!items)
return;
re = new RegExp(’^'+$input.val());
var filtereditems = items.filter(function(s) {
return s.search(re) >= 0;
});
var icount = Math.min(options.maxItems,filtereditems.length);
if (!filtereditems.length) {
$results.hide();
return;
}
var html = ”;
for (var i = 0; i ‘ + filtereditems[i] + ”;
}
$results.html(html).show();
$results
.children(’li’)
.mouseover(function() {
$results.children(’li’).removeClass(options.selectClass);
$(this).addClass(options.selectClass);
})
.click(function(e) {
e.preventDefault();
e.stopPropagation();
selectCurrentResult();
});
}
I am unable to get the bgiframe extention to work. Does anyone have any experience with this?
I modfied your script a bit, so that the dropdown gets the width of the input element:
function resetPosition() {
// requires jquery.dimension plugin
var offset = $input.offset();
$results.css({
top: (offset.top + input.offsetHeight) + ‘px’,
left: offset.left + ‘px’,
width: $input.width()
});
}
could also be integrated as an option.
and i also have the problem with IE6 like soren. i think it is because bgiframe trys to prepend the iframe to the result list. but an iframe can not be a child of an ul element. i think a solution could be to wrap the ul in a div element.
Thank you
if you use jquery 1.2 dimension-plugin is no longer required. offset() is part of 1.2.
Sorry to be such a noob, but when I plug in the three files:
jquery_current.js (1.21)
jquery.dimensions.js (from jquery.ui-1.0)
jquery.suggest_1.1.js
…and this code…
jQuery(function() {
jQuery(”#suggest”).suggest(”files/search.php”,{
onSelect: function() {alert(”You selected: ” + this.value)}});
});
…and load the page, I get these errors:
Error: jQuery is not defined
Source file: http://mwebdev/common/js/jquery/ui/jquery.ui-1.0/jquery.dimensions.js
Line: 116
———-
Error: jQuery is not defined
Source file: http://mwebdev/test/jquery/testing/suggest/jquery.suggest_1.1.js
Line: 311
———-
Error: jQuery is not defined
Source file: http://mwebdev/test/jquery/testing/suggest/
Line: 11
Would someone be so kind as to kick my skull?
Dont work option minchars = 0 in FireFox!
Dont work option minchars = 1 in FireFox!
I love this plugin, but it still can’t do a local autocomplete. I wish it had a function like autocompleteArray
This plugin works fine, but not together with the Tabs plugin (http://stilbuero.de/jquery/tabs/). There is an little problem with the position.
You can test it here: http://www.finrik.at/temp/tabs_suggest/index.html
Any idea, how i can use both plugins?
Great work
this is a really nice script
thanks a lot for sharing it
The plugin chokes on very large numbers of suggestions (100+). I know that’s not a common need, but here’s how I fixed it:
Change:
.mouseover(function() {
$results.children(’li’).removeClass(options.selectClass);
$(this).addClass(options.selectClass);
})
To:
.mouseover(function() {
$(this).addClass(options.selectClass);
})
.mouseout(function() {
$(this).removeClass(options.selectClass);
})
What you did seems safer, but I haven’t had any problems so far.
Hi!
Is there a fix for bgiframe comming up soon? I can’t use this plugin since it doesn’t work well in IE6 which most of my users use as browser. Otherwise great work!
This is a great plugin! Is there a way to assign the “suggester” to a dynamically created DOM input field? This field isn’t created onload it’s only created when a user clicks an “add” button.
i know its a weird request, but any tips would help.
thanks
never mind. i figured it out.
Hello!
First of all, great work. Thank you!
But is still kinda slow couse the server side script is called for every new key stroke. It is unnecessary since the results are the same as a key before - filtered ones! I guess the best think to do is cache the first result gotten from the server side script and then on next key stroke (since results can be or less or equal, never more) just to process the cached result and throw out filtered results and cache those too.. Please let me know if you decide to make an upgrade.
The suggested width patch should be incorporated too… and possibly the ui.tabs version too…finrik is right! it doesn’t position well under tags!
One more thing…. I’ve seen in this comments that ppl were implementing the max results limit. This is not front end stuff and should be implemented server side!!!
The only thing I am missing, besides equal width, is max height… and vertical scrollbar!
Cool implementation — I’ve actually extended it to allow for the query to return back a string data — ie, a|some thing|3|5 and do some post-processing. I’ll share it when i get all the kinks worked out.
Question though: how can i trigger the results window opening with a ‘default’ query from a button or link?
ie, i’m styling the text box as a fake select list and want to have the onclick event on the button ‘open’ the select list with all the options.
cheers,
-Kevin
kevin@mapmyfitness.com
Did anyone tried the above mentioned download (http://www.vulgarisoip.com/files/jquery.suggest.js) on multiple inputs at one page?
I guess “suggest” is not handling multiple “$results”.
Forget it! I was wrong!
Can anyone fix the “tabs” bug. Perhaps for an little gift from the Amazon Wishlist?
fix bgiframe bug.
function displayItems(items)
….
//fix bgiframe
try{
$results.html(html).show().bgiframe();
} catch(e){
$results.html(html).show();
}
…
Here is the code that extends the suggest to allow for multiple data values to be passed to the suggest:
ie,
1|2007 Volkswagon|Jetta|Blue
2|2006 B&W|iSeries|Silver
http://www.mapmyrun.com/js/jquery.suggest.js
The new config fields are: dataDelimeter, displayIndex, and dataProcessing (callback on item select)
ie,
$(”#txtLookup”).suggest(”ws/get_car_list.php”,
{
minchars: 0,
delay: 30,
dataDelimiter: ‘|’,
dataProcessing: function(data) {
var id = data[0];
var make = data[1];
var model = data[2];
var color = data[3];
$(”#txtMake”).val(make.stripHtml());
$(”#txtModel”).val(model);
$(”#txtColor”).val(color);
},
displayIndex: 1
}
);
note: stripHtml() is a function that is required as the name field brings back the html that highlights the match (’Volkswagon Jetta’)
String.prototype.stripHtml = function () {
var strOuput = this.replace(/(]+)>)/ig,”");
strOuput = strOuput.trim();
return strOuput;
};
Enjoy
To get the bgiframe finally working:
var html = ”;
for (var i = 0; i ‘ + items[i] + ”;
$results.html(html).show().bgiframe();
The for-loop is just to indicate where to add bgiframe(), i have nothing changed here.
In some cases, it might be necessary to append the suggestions to a specific parent element other than — as in my application, where the input field was placed on a draggable jqModal dialog box. To keep the suggestions list in the right place, it had to be positioned relative to the dialog box . I added a “parent” option for this purpose — here’s a list of modifications:
Change:
$results.addClass(options.resultsClass).appendTo(’body’);
to:
$results.addClass(options.resultsClass).appendTo(options.parent);
In resetPosition(), change:
var offset = $input.offset();
to:
var offset = $input.offset({relativeTo: $(options.parent)});
Then, at the beginning of suggest(), add:
resetPosition();
Finally, after the line:
options.maxCacheSize = options.maxCacheSize || 65536;
add this:
options.parent = options.parent || ‘body’;
And here’s how you use it:
$(’input#id’).suggest(’http://some.url/’, { parent: ‘#parent_id’ });
Gah, I just noticed my last comment has been stripped of tags. What I meant to say was:
In some cases, it might be necessary to append the suggestions “ul” to a specific parent element other than “body” — as in my application, where the input field was placed on a draggable jqModal dialog box. To keep the suggestions list in the right place, it had to be positioned relative to the dialog box “div”.
If you leave the suggestion list without selecting a value (via e.g. ESC key), the last timeout set is not reset, so if you leave the input box via TAB, the list appears one more time.
Had no time to investigate much, but as far as I’ve seen, you should match each
$result.hide()
with
if (timeout) {clearTimeout(timeout); timeout = false}
Can anyone fix the “tabs” bug. Perhaps for an little gift from the Amazon Wishlist?
What’s the tabs bug exactly? I’m working on a new version to be released soon along with another surprise.