当前位置：文江博客话题详情

jQuery 自动完成：根据字段中的文本更改文本样式

发布于 2024-11-30 17:22:55 字数 219 浏览 0 评论 0原文

所以我有一个集成了 jQuery 自动完成的输入。我不知道如何解释这一点。我正在尝试更改自动完成中文本的样式（如果键入），例如谷歌的自动完成功能：

在自动完成中，“stackover”比单词的其余部分更轻。

这是用于文本的 CSS： .ui-menu .ui-menu-item a

有谁知道如何做到这一点？

多谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风渺 2024-12-07 17:22:55

您可以订阅 open 事件并在匹配的术语周围附加一个范围，以便您可以相应地设置其样式：

$('#q').autocomplete({
    source: ['stackoverflow', 'stackoverflow careers', 'stackoverflowerror', 'stackoverflow api', 'stackoverflow podcast'],
    open: function(e, ui) {
        var data = $(this).data('autocomplete');            
        data.menu.element.find('li').each(function() {
            var $this = $(this);
            var matched = data.term;
            var rest = $this.text().replace(matched, '');
            var template = $('<span/>', {
                'class': 'ui-found',
                'text': matched
            }).after($('<span/>', {
                'text': rest    
            }));
            $this.html(template);
        });
    }
});

这是一个现场演示。

You could subscribe for the open event and append a span around the matched term so that you could style it accordingly:

$('#q').autocomplete({
    source: ['stackoverflow', 'stackoverflow careers', 'stackoverflowerror', 'stackoverflow api', 'stackoverflow podcast'],
    open: function(e, ui) {
        var data = $(this).data('autocomplete');            
        data.menu.element.find('li').each(function() {
            var $this = $(this);
            var matched = data.term;
            var rest = $this.text().replace(matched, '');
            var template = $('<span/>', {
                'class': 'ui-found',
                'text': matched
            }).after($('<span/>', {
                'text': rest    
            }));
            $this.html(template);
        });
    }
});

Here's a live demo.

回复收藏 0 原文

~没有更多了~