将jQuery组合框的文本还原为所选选项的文本，以防用户将其空白? [英] Restore text of jQuery combobox to selected option's text in case the text has been blanked by user?
问题描述
我面对着最新的jQuery组合框的问题.用例如下所述.
I am facing an issue with the latest jQuery combobox. The use case is as described below.
- 我在组合框中键入内容，这会弹出所有匹配选项，然后选择一个匹配选项.这会将组合框文本设置为所选项目的文本.
- 现在，我将注意力集中在组合框之外，然后回到组合框并删除所有文本，但不选择其他项. 即使存在选定的值，组合框仍显示空白文本.对我来说，这似乎不是很直观，因为空白文本应表示未选择任何选项.
- I type in something into the combobox, which brings up all matching options and I select one of the matching options. This sets the combobox text to the selected item's text.
- Now, I focus out of the combobox, and then come back to combobox and delete all the text, but not select another item. The combobox is showing blank text even though the selected value is there. This appears not very intuitive to me as a blank text should mean no option is selected.
可以在此处找到说明该问题的视频: http://screencast.com/t/QLUtZYsL2
A video illustrating this problem can be found here: http://screencast.com/t/QLUtZYsL2
这是我在上述用例中要实现的目标: 我想确保万一用户以某种方式删除组合框文本，然后在离开组合框时，该文本将还原为所选项目的文本.
This is what I am aiming for in above use case: I want to make sure that in case the user somehow deletes the combobox text, then on leaving the combobox, the text gets restored to selected item's text.
带有jQuery组合框的示例html页面如下.
Sample html page with jQuery combobox is as below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script type="text/javascript">
(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,
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);
};
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.appendTo(wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function () {
// close if already visible
if (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 results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function () {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function () {
$("#combobox").combobox();
$("#toggle").click(function () {
$("#combobox").toggle();
});
});
</script>
</head>
<body>
<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>
<button id="toggle">
Show underlying select</button>
</div>
<!-- End demo -->
</body>
</html>
推荐答案
我终于找到了出路，但让我从一些建设性的批评开始. jQuery就像火箭科学一样.哈哈. jQuery没有直观的事件模型，在这一方面javascript击败了jQuery.我花了很多时间试图在jQuery组合框上触发change或blur或focusout事件，但没有成功.因此，解决我在第一篇文章中提到的问题的最佳解决方案是遵循以下两种方法之一.
I finally found a way out, but let me start with some constructive criticism. jQuery is like ROCKET SCIENCE. LOL. jQuery doesn't have an intuitive event model, and in this area javascript defeats jQuery. I spent many hours trying to fire the change or blur or focusout event on jQuery combobox, but without any success. So, the best solution to solve the problem I have mentioned in my initial post, is to follow either of the 2 approaches given below.
-
将blur或focusout事件附加到jQuery组合框的父级.例如，一个div可能是父对象，因为它内部具有jQuery组合框.请看下面的代码.
Either attach the blur or focusout event to the parent of jQuery combobox. For example, a div could be the parent as it has the jQuery combobox within it. Look at code below.
$(document).ready(function () {
$("#dropdown_sel").combobox();
$($('.ui-combobox-input')[0]).css('width', '500px');
$("#toggle").click(function () {
$("#dropdown_sel").toggle();
});
//line below attaches the focusout event
$('#dropdown_sel').parent().bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } });
});
或将blur或focusout事件附加到jQuery组合框的输入元素.请看下面的代码.
Or attach the blur or focusout event to the input element of the jQuery combobox. Look at code below.
$(document).ready(function () {
$("#dropdown_sel").combobox();
$($('.ui-combobox-input')[0]).css('width', '500px');
$("#toggle").click(function () {
$("#dropdown_sel").toggle();
});
//line below attaches the focusout event
$('#dropdown_sel').next().find('input').bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } });
});
如果默认情况下选择第一个选项来提示用户，那么附加聚焦事件的代码将更改为如下所示.将另一个部分添加到事件的逻辑中，其中将输入元素的文本设置为第一个选项的文本.
If you are selecting the first option by default to prompt the user, then code for attaching focusout event would be changed to as below. An else part is added to the logic of the event, in which the text of input element is set to the text of the first option.
$('#dropdown_sel').next().find('input').bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } else { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:first').text()); } });
这篇关于将jQuery组合框的文本还原为所选选项的文本，以防用户将其空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
