Styling multiple instances of same JQuery control differently
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div id="searchControlsBasic" runat="server" class="searchControlsBasic">
<div id="sample" height="50%"></div>
<div id="minPrice">
<select id="selMinPrice" class="selMinPrice" tabindex="3">
<option value=“”>No Min</option>
<option value=“50000”>50,000</option>
<option value=“75000”>75,000</option>
</select>
</div>
<div id="maxPrice">
<select id="selMaxPrice" class="selMaxPrice" tabindex="4">
<option value=“”>No Max</option>
<option value=“50000”>50,000</option>
<option value=“75000”>75,000</option>
</select>
</div>
<div id="beds">
<select id="selBeds" class="selBeds" tabindex="5">
<option value=“0”>0+</option>
<option value=“1”>1+</option>
<option value=“2”>2+</option>
</select>
</div>
<div id="baths">
<select id="selBaths" class="selBaths" tabindex="6">
<option value=“0”>0+</option>
<option value=“1”>1+</option>
<option value=“1.5”>1.5+</option>
</select>
</div>
</div>
CSS
.ui-combobox
{
position: relative; /*original value*/
display: inline-block; /*original value*/
}
.ui-combobox-toggle
{
position: absolute; /*original value*/
top: 0; /*original value*/
bottom: 0; /*original value*/
margin-left: -1px; /*original value*/
padding: 0; /*original value*/
/* adjust styles for IE 6/7 */
*height: 1.7em; /*original value*/
*top: 0.1em; /*original value*/
}
.ui-combobox-input
{
margin: 0; /*original value*/
padding: 0.3em; /*original value*/
/*width: 90px; /*autocomplete textbox too wide*/
}
/*this is for the dropdown box*/
.ui-autocomplete
{
max-height: 400px; /*limits dropdown list height*/
overflow-y: auto; /* prevent horizontal scrollbar */ /*limits dropdown list height*/
overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/
z-index:1000 !important; /*limits dropdown list height*/
}
#minPrice, #maxPrice
{
min-height: 0;
display: inline-block;
padding: 20px 40px 20px 15px;
margin:0;
float: left;
}
#beds, #baths
{
min-height: 0;
display: inline-block;
padding: 20px 40px 20px 15px;
margin:0;
float: left;
}
#beds
{
clear: left;
}
JavaScript
function setFocusInSearch(control)
{
$(control).focus(function () // for selecting text on focus
{
// fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select())
$(control).select().mouseup(function (e)
{
e.preventDefault();
$(control).unbind("mouseup");
});
});
}
$(document).ready(function()
{
$.widget("ui.combobox", {
_create: function ()
{
var input,
self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $("<span>")
.addClass("ui-combobox")
.insertAfter(select);
input = $("<input>")
.appendTo(wrapper)
.val(value)
.addClass("ui-state-default ui-combobox-input")
.autocomplete({
delay: 0,
minLength: 0,
autoFocus: true,
source: function (request, response)
{
var requestTermNoCommas = request.term.replace(/,/g, "");
//var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i");
response(select.children("option").map(function ()
{
var text = $(this).text(); //original
var textNoCommas = $(this).text().replace(/,/g, "");
//if (this.value && (!request.term || matcher.test(text))) //original
if (this.value &&...