Jquery Autocomplete Combo with Scrollable Results
Whoever is in search of a basic business class combo box with autocomplete option might feel this article as handy.
The idea came to me after my search goes in vain for finding a jQuery combo with scrollable results.
You can find jquery autocomplete combo here.
You can find jquery autocomplete textbox with scrollable results here.
But if you need a autocomplete combo with scrollable results you can make use of the below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteEx.aspx.cs"
Inherits="jQueryUIDemos.Demo11.AutoCompleteEx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<title></title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../themes/blitzer/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-autocomplete.ui-menu
{
opacity: 0.5;
}
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}
.ui-button
{
margin-left: -16px;
}
/* <TODO:SG>: Fixes the icon size with the scrool bar length */
button.ui-button-icon-only
{
width: 1.2em;
}
.ui-button-icon-only .ui-button-text
{
padding: 0.35em;
}
.ui-autocomplete-input
{
margin: 0;padding: 0.48em 0 0.47em 0.45em;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">(function ($) {
$.widget(
"ui.combobox", {_create: function () {
var self = this,select = this.element.hide(),
selected = select.children(
":selected"),value = selected.val() ? selected.text() : "";var input = this.input = $("<input>")
.insertAfter(select)
.val(value)
.autocomplete({
delay: 0,
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");response(select.children("option").map(function () {
var text = $(this).text();if (this.value && (!request.term || matcher.test(text)))return {
label: text.replace(
new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text,
option:
this
};
}));
},
select: function (event, ui) {
ui.item.option.selected =
true;self._trigger("selected", event, {
item: ui.item.option
});
},
change: function (event, ui) {
if (!ui.item) {var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid =
false;select.children("option").each(function () {
if ($(this).text().match(matcher)) {this.selected = valid = true;return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything$(this).val("");
select.val(
"");input.data("autocomplete").term = "";return false;
}
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left");
input.data(
"autocomplete")._renderItem = function (ul, item) {return $("<li></li>")
.data(
"item.autocomplete", item).append("<a>" + item.label + "</a>")
.appendTo(ul);
};
this.button = $("<button type='button'> </button>")
.attr(
"tabIndex", -1).attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary:
"ui-icon-triangle-1-s"
},
text:
false
})
.removeClass("ui-corner-all")
.addClass(
"ui-corner-right ui-button-icon").click(function () {
// close if already visibleif (input.autocomplete("widget").is(":visible")) {
input.autocomplete(
"close");return;
}
// work around a bug (likely same cause as #5265)$(this).blur();
// pass empty string as value to search for, displaying all resultsinput.autocomplete("search", "");
input.focus();
});
},
destroy: function () {
this.input.remove();this.button.remove();
this.element.show();$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function () {
$(
"#combobox").combobox();$("#toggle").click(function () {$("#combobox").toggle();
});
});
</script> </head>
<
body>
<form id="form1" runat="server">
<h1>
jQuery AutoComplete Combo with Scrollable Results
</h1>
<br />
<div id="contextDiv">
<div class="demo">
<div class="ui-widget">
<label>
Your preferred programming language:
</label>
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
</div></form> </body>
</
html>
The changes i have done after properly merging those two links mentioned above.
/* <TODO:SG>: Fixes the icon size with the scrool bar length */
button.ui-button-icon-only
{
width: 1.2em;
}
The width needs to be properly set to fix the arrow button align with the scroll results vertical scroll bar.
.ui-button
{
margin-left: -16px;
}
The margin-left needs to be properly set to fix the button on top of the input textbox rather than next to the textbox. This change is need to make the results vertical scrollbar to be in sync with the button on the input textbox.
Issues faced:
The issue you will be facing is when the user types the long text which will go behind the arrow mark. I am working this to fix this and once i found the solution i will update the article.
Summary:
This is a very basic version of the Combo with Scrollable. If you want some advanced you can find plenty of stuffs.
Senthil Gandhi