Simple facebook-like textbox dropdown jquery plugin
11Aug2008 Filed under: dev Author: DanI created this plugin as a colleague of mine asked to do similar functionality as the status dropdown on facebook…
It is very very simple, and could be extended with a lot of functionality, but I’ll leave that as a challenge for later or others.
Html:
-
<input type="text" id="txtdropdown"/>
-
<ul>
-
<li>1000</li>
-
<li>2000</li>
-
<li>3000</li>
-
<li>4000</li>
-
</ul>
The first UL after the input field it will use as the definition for it’s dropdown.
Javascript usage:
-
$(document).ready(function() {
-
// for this example
-
$(‘#txtdropdown’).textdropdown();
-
-
// for searching by class name
-
$(‘input.textdropdown’).each(function() {
-
$(this).textdropdown();
-
});
-
});
Check it out at the lab. Or grap the plugin directly.
Fadi
August 17th, 2008 at 2:21 pm
very nice, but it would be perfect if autocomplete functionality is added to it
Dan
August 18th, 2008 at 7:32 pm
It might be at some point Fadi
It makes the plugin a bit more complex, so I guess if I do it will be in a new plugin instead
Assaad
January 3rd, 2009 at 12:52 am
Dan, you have done a great job here.
It doesn’t have to have an autocomplete functionality for it acts more as a combo box (customized).
The greatest and unique thing about this plugin is that it’s browser friendly, i tested it on IE6/7, FF, Safari, Chrome, Flock and Opera and the result was 95% the same except for stupid IE6 doesn’t not recognize the hover functionality. But all in all i give this plugin 9/10
keep up the great work Dan.
Dan
January 3rd, 2009 at 2:45 am
Thanks Assaad, it must be about time making some more jquery plugins…
Eric
April 14th, 2009 at 7:04 am
@Assaad
I changed the css to
ul li:hover {
cursor: pointer;
cursor: hand; /* for IE 6 */
}
and you get the little hand on the hover
Greens
June 12th, 2009 at 7:30 pm
How do I add dynamic UL instead of the predefined.
fritz
October 12th, 2009 at 2:08 pm
Hello, thank you for your nice script !
i have a problem with dynamical change also,
i change the like this function (this is very minimized as mine, i have an ajax request there, and some very more dropdowns on my site)
but how can i reinvent that the new updated options are clickable again, from my function{} out ?
function update(){
$(”#theoptions”).html(’ooo1ooo2ooo3ooo4ooo5′);}
aaa1
aaa2
aaa3
aaa4
aaa5
Thanks for your help !
Simple facebook-like textbox dropdown jQuery plugin | ajaxdump
December 9th, 2009 at 5:35 am
[...] like dropdown using jQuery Resource: Sample | TutorialShare this on del.icio.usDigg this!Share this on RedditBuzz up!Stumble upon something good? Share it [...]
Simple facebook-like textbox dropdown jquery plugin « Ajax Freak
December 12th, 2009 at 6:11 pm
[...] | Tutorial VN:F [1.7.7_1013]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.7.7_1013]Rating: 0 (from 0 [...]