带滚动结果的 Jquery Autocomplete Combo

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

4分钟阅读

20780

带滚动结果的 Jquery Autocomplete Combo 任何正在寻找带自动完成功能的商业级组合框的人可能会觉得

带滚动结果的 Jquery Autocomplete Combo

任何正在寻找带自动完成功能的商业级组合框的人可能会觉得这篇文章很有用。

在我搜索不到带有滚动结果的 jQuery 组合框后，我产生了灵感。

你可以在这里找到带滚动结果的 jquery 自动完成组合框。

你可以在这里找到带滚动结果的 jquery 自动完成文本框。

但是，如果你需要一个带有滚动结果的自动完成组合框，你可以使用下面的代码。

<%@ 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">

<样式 type="text/css">

.ui-autocomplete.ui-menu

{

透明度: 0.5;

}

.ui-autocomplete

{

max-height: 100px;

overflow-y: auto; /* 防止水平滚动条 */

overflow-x: hidden; /* 添加内边距以适应垂直滚动条 */

padding-right: 20px;

}

/* IE 6 不支持 max-height

* 我们使用 height 代替，但这会迫使菜单始终是这么高

* html .ui-autocomplete

{

height: 100px;

}

.ui-button

{

margin-left: -16px;

}

/* <TODO:SG>: 修复了图标大小与滚动条长度的对齐 */

button.ui-button-icon-only

{

width: 1.2em;

}

.ui-button-icon-only .ui-button-text

{

填充: 0.35em;

}

.ui-autocomplete-input

{

边距: 0;填充: 0.48em 0 0.47em 0.45em;

}

</样式>

(function ($) {

$.widget("ui.combobox", {

_createfunction () {

varself =this,

select =this.element.hide(),

selected = select.children(":selected"),

value = selected.val() ? selected.text()"";varinput =this.input = $("<input>")

.insertAfter(select)

.val(value)

.autocomplete({

delay: 0,

minLength: 0,

sourcefunction(request, response) {

varmatcher =newRegExp($.ui.autocomplete.escapeRegex(request.term),"i");

response(select.children("option").map(function () {

vartext = $(this).text();

if (this.value && (!request.term || matcher.test(text)))return {

label: text.replace(

newRegExp(

"(?![^&;]+;)(?!<[^<>]*)(" +

$.ui.autocomplete.escapeRegex(request.term) +

")(?![^<>]*>)(?![^&;]+;)", "gi"

), "<strong>$1</strong>"),

value: text,

optionthis

};

}));

selectfunction(event, ui) {

ui.item.option.selected =true;

self._trigger("selected", event, {

item: ui.item.option

});

changefunction(event, ui) {

if(!ui.item) {

varmatcher =newRegExp("^"+ $.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) {

// 移除无效值，因为它未匹配任何内容

$(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", "显示所有项目")

.insertAfter(input)

.button({

icons: {

primary"ui-icon-triangle-1-s"

文本false

})

.removeClass("ui-corner-all")

.addClass("ui-corner-right ui-button-icon")

.click(function () {

// 如果已可见，则关闭

if(input.autocomplete("widget").is(":visible")) {

input.autocomplete("close");

return;

}

// 修复一个 bug (可能与 #5265 原因相同)

$(this).blur();

// 传递空字符串作为要搜索的值，显示所有结果

input.autocomplete("search", "");

input.focus();

});

destroyfunction () {

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>

<h1>

带滚动结果的 jQuery Autocomplete Combo

</h1>

<br />

<label>

您喜欢的编程语言

</label>

<option value="ActionScript">ActionScript</option>

<option value="AppleScript">AppleScript</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="JavaScript">JavaScript</option>

<option value="Python">Python</option>

<option value="Scala">Scala</option>

<option value="Scheme">Scheme</option>

</select>

</div>

</form> </body>

</html>

在正确合并上述两个链接后，我进行了一些更改。

/* <TODO:SG>: 修复了图标大小与滚动条长度的对齐 */

button.ui-button-icon-only

{

width: 1.2em;

}

需要正确设置宽度，才能使箭头按钮与滚动结果的垂直滚动条对齐。

.ui-button

{

margin-left: -16px;

}

需要正确设置左边距，才能使按钮位于输入文本框的顶部而不是旁边。此更改是为了使结果的垂直滚动条与输入文本框上的按钮同步。

遇到的问题

您会遇到的问题是，当用户输入长文本时，文本会跑到箭头标记后面。我正在努力解决这个问题，一旦找到解决方案，我将更新文章。

摘要

这是带滚动功能的组合框的一个非常基础的版本。如果您需要更高级的功能，可以找到很多资源。

Senthil Gandhi