Copyright © 2010 Tom Coote. All Rights Reserved. Powered by WordPress themed by bavotasan.com.
Here is my new suggest box as a jQuery plugin which now uses a JSON string to represent it’s search data. It will accept the data as a JSON string, the object that the JSON represents or a function that returns one of those two things. Here is an example;
$('input#suggestBox').jsonSuggest(jsonString);The search data sent to the plugin is an array of objects. Each object must contain atleast a textvariable. Further to that in order to display an image in the results it can contain an image variable which is the path to an image and for extra text to be placed in the results but not used to search you can specify an extra variable. Of course as well as these variables which are used to create the results you can specify as many other variables as you want which will then get passed to the callback function if specified. For example I use an ID variable as thats what most applications will require.
As well as the required search data there are a number of options that the plugin accepts in order to change it’s behaviour;
- minCharacters : [default 1] Number of characters that the input should accept before running a search.
- maxResults: [default undefined] If set then no more results than this number will be found.
- wildCard : [default ""] A character to be used as a match all wildcard when searching. Leaving empty will mean results are matched inside strings but if a wildCard is present then results are matched from the beginning of strings.
- caseSensitive : [defautl false] True if the search is to be case sensitive.
- notCharacter : [default !] The character to use at the start of any search text to specify that the results should NOT contain the following text.
- maxHeight : [default 350] This is the maximum height that the results box can reach before scroll bars are shown instead of getting taller.
- highlightMatches: [default true] This will add strong tags around the text that matches the search text in each result.
- onSelect : [default undefined] function that gets called once a result has been selected, gets passed in the object version of the result as specified in the json string.
- ajaxResults : [default false] If this is set to true then you must specify a function as the searchData constructor parameter. This is because when this settings is true then results are retrieved from this external function each time they are needed instead of being retrieved from the data given on contruction. The searchData function must return a JSON string of resulting objects or the object which represents the JSON string. The function is passed the following paramenters;
- The search text typed into the input box
- The current wildCard setting
- The current caseSensitive setting
- The current notCharacter setting
- width : [default undefined] If set this will become the width of the results box else the box will be the same width as the input.
As you may have noticed in the options you can handle the search yourself by using an external function. If this is set than you have complete control over what results should show each time a user types in the input box. You can use this to retrieve results dynamically from where ever you want which is good for large database search’s etc. Finally the results box can be styled in anyway through the accompanying style sheet.
So if you want to see some other examples then visit my demo page. Apart from that please download the source and use it as you wish. Let me know in the comments if you have found this useful.
Download the source
Visit plugin page at jQuery
Demo Page
Tested to work in the following browsers;
- IE8, IE 7 & 6
- FireFox 3.5
- Opera 9.64
- Chrome
- Safari for windows
June 1, 2010 at 4:34 am
Lesenswerter Beitrag, danke.
June 2, 2010 at 11:38 pm
Awesome thank you! Looks very promising.
June 3, 2010 at 4:11 pm
Just a quick question. I have my data stored in a .json file and am loading it in via getJSON(). The data is stored as:
{“posts”:
[
{
"title":"My Title",
"url":"http://www.myurl.org/",
"topic":["listitem1","listitem2"],
“type”:["item1"],
“region”:”National”,
“scale”:”scale1″,
“description”:”paragraph description here”
}
]
}
This doesn’t work however when I send my data object to the suggest function. Any ideas?
June 3, 2010 at 4:29 pm
Hi, you need to do two things to get this working. Firstly each object in your array needs an id property. Secondly when you pass this JSON to the suggest box you must pass data.posts as that’s the array of data.
Hope that helps.
June 17, 2010 at 2:49 pm
Hi Tom,
Nice plugin. This is almost exactly where I’m looking for.
The problem I’m having is with an Ajax call for the json data. Because it’s async the script will continue and try to parse an object which at that time is empty. Do you have a fix for this problem?
Regards
June 17, 2010 at 4:00 pm
If you have a look at the demo page you will see that example 3 and example 4 can be used to get data via AJAX. Hope that helps.
June 18, 2010 at 10:15 am
Hi tom,
That won’t work. Today I came up with a fix for the problem “A user types and the browser freezes after every tick”, add a delay to the request and it’s not annoying anymore.
I will sent you the newer version of the script today.
Regards
July 5, 2010 at 1:59 pm
Great Share !! Thumbs up
July 6, 2010 at 12:52 pm
Hi Ruud, Today I added suggest box in a website,
But I can’t see any simple way to increase the width of the div expanding on input.
I tried fixing it in the provided .css file, still no luck.
Any comments, how to increase the width of the expanding box when I have a search box of only 18 columns (80px).
Regards
Roomee
July 6, 2010 at 1:22 pm
Hi Roomee, the plugin has a width option. Just pass in your desired width when loading the plugin.
$(‘#suggestBox’).jsonSuggest({width:400});
July 6, 2010 at 1:40 pm
Thanks Tom,
But I can see this working myside,
i am using class not ID for the searchbox.
jQuery(function() {
$(‘input.tsearchbox’).jsonSuggest(testData.products, {onSelect:callback});
$(‘input.tsearchbox’).jsonSuggest({width:400});
});
July 6, 2010 at 1:41 pm
Thanks Tom,
But I can not see this working myside,
i am using class not ID for the searchbox.
jQuery(function() {
$(‘input.tsearchbox’).jsonSuggest(testData.products, {onSelect:callback});
$(‘input.tsearchbox’).jsonSuggest({width:400});
});
July 6, 2010 at 1:49 pm
You need to do:
jQuery(function() {
$(‘input.tsearchbox’).jsonSuggest(testData.products, {onSelect:callback, width:400});
});
July 6, 2010 at 2:26 pm
nops, still not working , I also tried to fix it in the jquery.JSONSuggest.js
But there isn’t anything for width.
everything else is great but width for the DIV,
I wonder if I m missing any default value in the JS file with the name maxwidth or minwidth.
(function($){$.fn.jsonSuggest=function(searchData,settings){var defaults={minCharacters:3,maxResults:5,wildCard:”",caseSensitive:false,notCharacter:”!”,maxHeight:400,highlightMatches:true,onSelect:undefined,ajaxResults:false};
maxHeight:400 >>> minwidth:???
July 13, 2010 at 4:10 am
Hi Tom
I was wondering if you knew why your json suggest doesn’t work in the latest version of jquery 1.4. It does work it just doesn’t lose focus when you click out of it. So it always remains open. Are there any plans to fix this?
Cheers
Drew
July 13, 2010 at 4:29 am
Hi Tom
I fixed it by targeting the nearest div and hiding teh results on mouseover
$(‘#hp-layout’).bind(‘mouseover’, function(){
$(‘.jsonSuggestResults’).hide();
});
I’m sure you can come up with something for your plugin though otherwise your awesome plugin will no longer work with new versions of jquery
Cheers
Drew
July 13, 2010 at 8:40 am
Hi Drew, I’ll probably get around to it one day. Since 1.4 has come out jQuery have released their own auto suggest box UI component which is pretty good. I started a new project recently with 1.4 but never used this plugin but when I do use it with 1.4 I’ll no doubt do a fix for it too.
July 13, 2010 at 2:00 pm
Hi, thx for great plugin, but i have a little problem.
I’m using ajax to retrieve data, and i dont know how to wait until ajax is ready. I’m using jsonp with no synchronous support
var result;
(‘input#input’).jsonSuggest(
function(text, wildCard, caseSensitive, notCharacter) {
var surl = ‘http://myurl;
$.ajax({
cache: false,
url: surl,
dataType: “jsonp”,
jsonp : “callback”,
success: function(data) {
result = data;
}
});
return result;
}, {ajaxResults:true});
Result is returned before ajax is completed
so it’s empty
I tried delay() and similar but nothing worked
Thank you for any help. I’m hopeless.
July 13, 2010 at 3:42 pm
All you have to do to make the plugin compatible with jQuery 1.4 is to change
$().mousemove(function (e) {
pageX = e.pageX;
pageY = e.pageY;
});
to $(document) or $(window) instead, since jQuery 1.4 made that a breaking change, so it’ll return an empty jQuery object instead of taking the document.
July 27, 2010 at 12:42 am
Hi, we have a hopefully easy question..
How can we “remove” a json object or update it’s content?
E.g, we have a json object with a list of elements and when the user changes some value, we want to reload the json object with new elements.
Any help would be helpful.