Javascript jQueryUI使用默认文本自动完成
我有一个jQuery自动完成小部件,它在输入中有一些默认的阴影文本,比如Enter Something。在用户在输入字段中键入内容并从下拉列表中选择内容后,我希望将输入返回到着色的默认文本。我几乎让它走了,但它没有阴影。此外,理想情况下,我不必重复文本默认值,即输入两次。我的脚本应该如何修改才能这样做 另外,请解释为什么有时输入值并不总是与我在输入中实际看到的字符相同。我想这可能与我最初的问题有点关联Javascript jQueryUI使用默认文本自动完成,javascript,jquery,jquery-ui,jquery-ui-autocomplete,Javascript,Jquery,Jquery Ui,Jquery Ui Autocomplete,我有一个jQuery自动完成小部件,它在输入中有一些默认的阴影文本,比如Enter Something。在用户在输入字段中键入内容并从下拉列表中选择内容后,我希望将输入返回到着色的默认文本。我几乎让它走了,但它没有阴影。此外,理想情况下,我不必重复文本默认值,即输入两次。我的脚本应该如何修改才能这样做 另外,请解释为什么有时输入值并不总是与我在输入中实际看到的字符相同。我想这可能与我最初的问题有点关联 <div class="ui-widget"> <label for
<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags" value="Enter Something" class="default-value" />
</div>
$('.default-value').each(function () {
var $t = $(this),
default_value = this.value;
$t.css('color', '#929292');
$t.focus(function () {
if (this.value == default_value) {
this.value = '';
$t.css('color', 'black');
}
});
$t.blur(function () {
if ($.trim(this.value) == '') {
$t.css('color', '#929292');
this.value = default_value;
}
});
});
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$("#tags").autocomplete({
source: availableTags,
select: function (event, ui) {
console.log(this);
//console.log(this,$(this).val());
$(this).val('Enter Something').blur();
//console.log(this,$(this).val());
return false;
}
});
替换
$(this).val('Enter Something').blur();
与
下面是修改后的示例:提供的答案非常好。但是,当我在“自动完成”列表中进行选择时,该选择不会填充到输入中。为了让它工作,我只需要从自动完成中删除select函数
$("#tags").autocomplete({
source: availableTags,
//select: function (event, ui) {
//console.log(this);
//console.log(this,$(this).val());
//$(this).val('').blur();
//console.log(this,$(this).val());
// return true;
//}
});
你能举个例子吗?输入值并不总是和我在输入中实际看到的字符相同?@netme。我以为我亲眼目睹了,但可能弄错了。我稍后需要检查一下。谢谢
$("#tags").autocomplete({
source: availableTags,
//select: function (event, ui) {
//console.log(this);
//console.log(this,$(this).val());
//$(this).val('').blur();
//console.log(this,$(this).val());
// return true;
//}
});