具有默認選定值的jQuery自動完成組合框

我正在使用jQuery自動完成與組合框。我試圖選擇像PHP選項一樣的默認值。我希望你能理解我的問題。
具有默認選定值的jQuery自動完成組合框

任何想法或建議？謝謝。

我的代碼：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Autocomplete - Combobox</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<style> 
.custom-combobox { 
    position: relative; 
    display: inline-block; 
} 
.custom-combobox-toggle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin-left: -1px; 
    padding: 0; 
/* support: IE7 */ 
*height: 1.7em; 
*top: 0.1em; 
} 
.custom-combobox-input { 
    margin: 0; 
    padding: 0.3em; 
} 
</style> 
<script> 
(function($) { 
$.widget("custom.combobox", { 
_create: function() { 
this.wrapper = $("<span>") 
.addClass("custom-combobox") 
.insertAfter(this.element); 
this.element.hide(); 
this._createAutocomplete(); 
this._createShowAllButton(); 
}, 
_createAutocomplete: function() { 
var selected = this.element.children(":selected") 
value = selected.val() ? selected.text() : ""; 
this.input = $("<input>") 
.appendTo(this.wrapper) 
.val(value) 
.attr("title", "") 
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
.autocomplete({ 
delay: 0, 
minLength: 0, 
source: $.proxy(this, "_source") 
}) 
.tooltip({ 
tooltipClass: "ui-state-highlight" 
}); 
this._on(this.input, { 
autocompleteselect: function(event, ui) { 
ui.item.option.selected = true; 
this._trigger("select", event, { 
item: ui.item.option 
}); 
}, 
autocompletechange: "_removeIfInvalid" 
}); 
}, 
_createShowAllButton: function() { 
var input = this.input, 
wasOpen = false; 
$("<a>") 
.attr("tabIndex", -1) 
.attr("title", "Show All Items") 
.tooltip() 
.appendTo(this.wrapper) 
.button({ 
icons: { 
primary: "ui-icon-triangle-1-s" 
}, 
text: false 
}) 
.removeClass("ui-corner-all") 
.addClass("custom-combobox-toggle ui-corner-right") 
.mousedown(function() { 
wasOpen = input.autocomplete("widget").is(":visible"); 
}) 
.click(function() { 
input.focus(); 
// Close if already visible 
if (wasOpen) { 
return; 
} 
// Pass empty string as value to search for, displaying all results 
input.autocomplete("search", ""); 
}); 
}, 
_source: function(request, response) { 
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
response(this.element.children("option").map(function() { 
var text = $(this).text(); 

if (this.value && (!request.term || matcher.test(text))) 
return { 
label: text, 
value: text, 
option: this 
}; 
})); 
}, 
_removeIfInvalid: function(event, ui) { 
// Selected an item, nothing to do 
if (ui.item) { 
return; 
} 
// Search for a match (case-insensitive) 
var value = this.input.val(), 
valueLowerCase = value.toLowerCase(), 
valid = false; 
this.element.children("option").each(function() { 
if ($(this).text().toLowerCase() === valueLowerCase) { 
this.selected = valid = true; 
return false; 
} 
}); 
// Found a match, nothing to do 
if (valid) { 
return; 
} 
// Remove invalid value 
this.input 
.val("") 
.attr("title", value + " didn't match any item") 
.tooltip("open"); 
this.element.val(""); 
this._delay(function() { 
this.input.tooltip("close").attr("title", ""); 
}, 2500); 
this.input.data("ui-autocomplete").term = ""; 
}, 
_destroy: function() { 
this.wrapper.remove(); 
this.element.show(); 
} 
}); 
})(jQuery); 
$(function() { 
$("#combobox").combobox(); 
$("#toggle").click(function() { 
$("#combobox").toggle(); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="ui-widget"> 
<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> 
</body> 
</html>

來源

2013-07-02 Rajnikanth

你需要更具體的關於您的question.if可能創建方案中使用小提琴，we'll看看它。 – dreamweiver

@dreamweiver目前默認值是沒有在我的組合框，我想選擇的值是PHP。我的jsFiddle http://jsfiddle.net/mzQ7m/ – Rajnikanth

你只需要設置屬性**選擇**作爲默認選項。這裏是相同的http://jsfiddle.net/dreamweiver/mzQ7m/1/ – dreamweiver

這可以通過所有的值循環做，直到我們找到了目標值，然後設置選擇到相應的選項標記的屬性。

JS CODE：

setDefault("Scala"); //function to set the selected value as default function setDefault(defValue) { $('#combobox option').each(function() { if (($(this).attr('value')) === defValue) { $(this).attr('selected', 'selected'); } }); }

LIVE DEMO @ JS小提琴

來源

2013-07-02 10:34:31 dreamweiver

Dreamweaver的發佈可以進一步簡化的代碼。沒有必要遍歷選項，您可以使用option[value=""]和字符串連接來構建選擇器。

setDefault("Scala"); 
//function to set the selected value as default 
function setDefault(defValue) { 
    $('#combobox option[value="' + defValue + '"]').attr('selected', 'selected'); 
}

jsfiddle demo

來源

2013-10-18 20:04:43

具有默認選定值的jQuery自動完成組合框

回答

相關問題