Login

i am using a dropdown box with usernames,i want to include search function in the dropdown box where we have to search by name instead of scrolling?
how can i do that? i am using this code but i am not getting the right output.

For this i am using the following code .

<head>
<style>
body {
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size: 0.8em;
padding: 10px 5px;
}

.searchbox {
border: 1px solid #456879;
border-radius: 6px;
height: 22px;
width: 200p;
margin-top: 5px;
}
</style>

<script>

(function ($) {

$.fn.searchit = function (options) {

return this.each(function () {

$.fn.searchit.globals = $.fn.searchit.globals || {
counter: 0
}
$.fn.searchit.globals.counter++;
var $counter = $.fn.searchit.globals.counter;

var $t = $(this);
var opts = $.extend({}, $.fn.searchit.defaults, options);

// Setup default text field and class
if (opts.textField == null) {
$t.before("<input type='textbox' id='__searchit" + $counter + "'><br>");
opts.textField = $('#__searchit' + $counter);
}
if (opts.textField.length > 1) opts.textField = $(opts.textField[0]);

if (opts.textFieldClass) opts.textField.addClass(opts.textFieldClass);
//MY CODE-------------------------------------------------------------------
if (opts.selected) opts.textField.val($(this).find(":selected").val());
//MY CODE ENDS HERE -------------------------------------------------------
if (opts.dropDown) {
$t.css("padding", "5px")
.css("margin", "-5px -20px -5px -5px");

$t.wrap("<div id='__searchitWrapper" + $counter + "' />");
opts.wrp = $('#__searchitWrapper' + $counter);
opts.wrp.css("display", "inline-block")
.css("vertical-align", "top")
.css("overflow", "hidden")
.css("border", "solid grey 1px")
.css("position", "absolute")
.hide();
if (opts.dropDownClass) opts.wrp.addClass(opts.dropDownClass);
}

opts.optionsFiltered = [];
opts.optionsCache = [];

// Save listbox current content
$t.find("option").each(function (index) {
opts.optionsCache.push(this);
});

// Save options
$t.data('opts', opts);

// Hook listbox click
$t.click(function (event) {
_opts($t).textField.val($(this).find(":selected").text());
_opts($t).wrp.hide();
event.stopPropagation();
});

// Hook html page click to close dropdown
$("html").click(function () {
_opts($t).wrp.hide();
});

// Hook the keyboard and we're done
_opts($t).textField.keyup(function (event) {
if (event.keyCode == 13) {
$(this).val($t.find(":selected").text());
_opts($t).wrp.hide();
return;
}
setTimeout(_findElementsInListBox($t, $(this)), 50);
})

})

function _findElementsInListBox(lb, txt) {

if (!lb.is(":visible")) {
_showlb(lb);
}

_opts(lb).optionsFiltered = [];
var count = _opts(lb).optionsCache.length;
var dropDown = _opts(lb).dropDown;
var searchText = txt.val().toLowerCase();

// find match (just the old classic loop, will make the regexp later)
$.each(_opts(lb).optionsCache, function (index, value) {
if ($(value).text().toLowerCase().indexOf(searchText) > -1) {
// save matching items
_opts(lb).optionsFiltered.push(value);
}

// Trigger a listbox reload at the end of cycle
if (!--count) {
_filterListBox(lb);
}
});
}

function _opts(lb) {
return lb.data('opts');
}

function _showlb(lb) {
if (_opts(lb).dropDown) {
var tf = _opts(lb).textField;
lb.attr("size", _opts(lb).size);
_opts(lb).wrp.show().offset({
top: tf.offset().top + tf.outerHeight(),
left: tf.offset().left
});
_opts(lb).wrp.css("width", tf.outerWidth() + "px");
lb.css("width", (tf.outerWidth() + 25) + "px");
}
}

function _filterListBox(lb) {
lb.empty();

if (_opts(lb).optionsFiltered.length == 0) {
lb.append("<option>" + _opts(lb).noElementText + "</option>");
} else {
$.each(_opts(lb).optionsFiltered, function (index, value) {
lb.append(value);
});
lb[0].selectedIndex = 0;
}
}
}

$.fn.searchit.defaults = {
textField: null,
textFieldClass: null,
dropDown: true,
dropDownClass: null,
size: 5,
filtered: true,
noElementText: "No elements found",
//MY CODE------------------------------------------
selected: false
//MY CODE ENDS ------------------------------------
}

}(jQuery))

$("select").searchit({
textFieldClass: 'searchbox',
selected: true
});

</script>

</head>

<body>

Type the search text:
<br />
<select id="listBox1">
<option>Robinhood</option>
<option>Rockford</option>
<option>Rome</option>
<option>Ronda</option>
<option>Rondon</option>
<option>Rondonopolis</option>
<option>Rongelap</option>
</select>
<br>Second searchbox
<br>
<select id="listBox2">
<option>Robinhood</option>
<option>Rockford</option>
<option>Rome</option>
<option>Ronda</option>
<option>Rondon</option>
<option>Rondonopolis</option>
<option>Rongelap</option>
</select>

</body>

but when i execute this code,

it wont allow me to type and search,it is showing like ordinary Dropdown box.what i have to do??
give me some solutions for this.

sharonapj