Jun 12, 2009
jSuggest Enhanced – Auto-complete Using jQuery
jSuggest Enhanced updated to 1.1
I was looking for a lightweight simple auto-complete using jQuery, found a perfect one that fits my requirement, enter jSuggest an excellent lightweight auto-complete control based on the beautiful jQuery.
However I needed some extra’s like,
- Trigger callback function on a ‘Click’ / Selection from the drop down.
- Highlight the search keywords in the drop down list.
- Support for JSON data
and do I hooked up these minor enhancements to the core.
You can download the patched version from the link at the bottom of this post.
Data Format
The dataFormat Option defaults to “json” format, other supported format is “html”
dataFormat: "json"
Highlight Keywords
The highlight Option defaults to “true” for highlighting search keywords on the dropdown.
highlight: true
The actual display differentiation has to be done on the CSS level for the high light to show.
#jSuggestContainer ul li var{background:#FFCC65; font-weight:bold;}
On Select Callback
The onSelect Option defaults to “” (empty), When a callback function name is given, the given function is called with the selected text.
onSelect: "callback_function_name"
Hope this helps some one.
Original Contol at : Keansphere (jSuggest)
Patched file : Enhanced jSuggest
i dont see any support for UTF 8 in there too…
Thank you for jSuggest Enhanced!
I've one question: The top and bottom border of #jSuggestContainer doesn't disappear when nothing is found. Is there any way how to hide them?
Glad it as of use to you, You can pick up the latest update which fixes this issue.
jSuggest Enhanced 1.1
Great, it works awasome now! Thanks a lot!
You can click the following link to look at the test page I have created.
http://cmuench.ath.cx:8001/portal/dashboard.php
You can earch for Security or Soundbooth
On the test page, it works fine on my machine (FF,IE&Chrome. latest versions).
Test on a different browser / machine to make sure its not something environmental.
yes can click anything I want.
no on the z-index. I did the following in my css and still nothing
#jSuggestContainer {
position:absolute;
font: 12px Tahoma;
border:1px solid #ffb931;
border-top:0;
background:#FFF;
z-index: 8;
}
Woops posted on your facebook plugin by mistake.
Help needed.
I get it to show the results box.
However I can't use my keyboard in the box nor can I click the results to make em pop in the input box.
any ideas?
Check a couple of pointers,
- When you have the results drop down are you able to click on any other elements on the page.
- Is there any other elements that might be overlapping the results drop down ?
(Some thing like an another div with a higher z-index blocking this layer ?)
Hello, how do I use the callback function?
I do generate a list of LI elements with key as element id. I was hoping that I could use it to store in a hidden field for later operations.
Hi,
The callback will just pass the selected text from the drop down to given function. This has to be specified at the time of jSuggest object creation.
For ex.,
$("#searchInput").jSuggest({
url: "http://www.mydomain.com/search.php",
type: "GET",
data: "kw",
onSelect: "processSelection"
});
processSelection being the function to be called on the 'onClick' event of the dropdown.
function processSelection(selectedText)
{
alert ('You have choosen' + selectedText);
}
hope this is clear.
Raja,
Thanks for the reply, I came back now to see if u answered. Thanks once more for your attention.