How can I custom-format the Autocomplete plug-in r

2018-12-31 21:24发布

站内问答 / JavaScript
846 13 5

I’m using the jQuery UI Autocomplete plug-in. Is there a way to highlight search character sequence in drop-down results?

For example, if I have “foo bar” as data and I type "foo" I’ll get “foo bar” in the drop-down, like this:

“Breakfast” appears after “Bre” is typed with “Bre” having a bold type and “akfast” having a light one.

13条回答
谁念西风独自凉
2楼-- · 2018-12-31 21:38

Here it goes, a functional full example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="search"></label>
  <input type="text" name="search" id="search" />
</form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};


var availableTags = [
    "JavaScript",
    "ActionScript",
    "C++",
    "Delphi",
    "Cobol",
    "Java",
    "Ruby",
    "Python",
    "Perl",
    "Groove",
    "Lisp",
    "Pascal",
    "Assembly",
    "Cliper",
];

$('#search').autocomplete({
    source: availableTags,
    minLength: 3
});


});
</script>
</body>
</html>

Hope this helps

查看更多
0人赞 添加讨论(0) 举报
看风景的人
3楼-- · 2018-12-31 21:39

this also works:

       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };

a combination of @Jörn Zaefferer and @Cheeso's responses.

查看更多
0人赞 添加讨论(0) 举报
旧人旧事旧时光
4楼-- · 2018-12-31 21:40

Take a look at the combobox demo, it includes result highlighting: http://jqueryui.com/demos/autocomplete/#combobox

The regex in use there also deals with html results.

查看更多
0人赞 添加讨论(0) 举报
春风洒进眼中
5楼-- · 2018-12-31 21:41

Super helpful. Thank you. +1.

Here is a light version that sorts on "String must begin with the term":

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);
            });
        }
    });
}

hackAutocomplete();
查看更多
0人赞 添加讨论(0) 举报
荒废的爱情
6楼-- · 2018-12-31 21:43

you can use folowing code:

lib:

$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
        //any manipulation with li
        return $li;
    }
});

and logic:

$('selector').highlightedautocomplete({...});

it creates custom widget that can override _renderItem without overwriting _renderItem of original plugin prototype.

in my example also used original render function to some simplify code

it's important thing if you want to use plugin in different places with different view of autocomplete and don't want to break your code.

查看更多
0人赞 添加讨论(0) 举报
还给你的自由
7楼-- · 2018-12-31 21:44

If you instead use the 3rd party plugin, it has a highlight option: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(see the Options tab)

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)