如何在自动完成的jQuery UI中突出显示输入的单词 [英] How to highlight input words in autocomplete jquery ui

问题描述

您能帮助我在自动完成文本框中突出显示键入的单词吗?我已经在填充自动填充单词，我只需要突出显示键入的单词即可.我是Jquery自动填充的新手

Could you please help me in highlighting the typed words in the auto complete text box. i am already populating the autocomplete words and i need to just highlight the typed words alone.i am new to Jquery autocomplete

我以类似<Strong>Br</Strong>ijesh的文本形式获取输出//被视为文本
而不是仅突出显示 Br .

i am getting the output as text like <Strong>Br</Strong>ijesh // seen as text
and not as highlighting the Br alone.

下面是代码段

$(document).ready(function () {
$("#studentName").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Webservice.asmx/GetStudentNames",
            data: "{'prefixText':'" + request.term + "'}",
            dataType: "json", 
            success: function (data) {
           var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                response($.map(data.d, function (item) {
                    return {
                    label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"),
                    val: item.split('|')[1]
                    }
                }))
            },

            failure: function (response) {
                ServiceFailed(result);
            }
        });
    },
    select: function (event, ui) {
     txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method
    },
    minLength: 2
});
});              // End of ready method

请帮助我.

推荐答案

在我看来，您应该覆盖_renderItem方法以对项目进行自定义呈现.该代码可能与以下内容有关:

It seems to me you should overwrite the _renderItem method to have custom rendering of the items. The code could be about the following:

$("#studentName").autocomplete({/* all your parameters*/})
    .data("autocomplete")._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };

在代码中，我使用jQuery UI CSS"ui-state-highlight"进行突出显示.您可以改用<strong>.而且，我没有包含将任何RegEx字符转义为this.term内的代码.我只想向您解释主要思想.例如，请查看答案.

In the code I use jQuery UI CSS "ui-state-highlight" for highlighting. You can use <strong> instead. Moreover I don't include the code which would escape any RegEx characters which could be inside of this.term. I wanted to explain you the main idea only. Look at the answer for example for additional information.

已更新:jQuery UI的最新版本使用.data("ui-autocomplete")而不是.data("autocomplete").为了使您的代码在jQuery(新旧)版本中均能正常工作，您可以执行以下操作:

UPDATED: More recent versions of jQuery UI uses .data("ui-autocomplete") instead of .data("autocomplete"). To make your code working in both (old and new) versions of jQuery you can do something like the following:

var $elem = $("#studentName").autocomplete({/* all your parameters*/}),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
if (elemAutocomplete) {
    elemAutocomplete._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };
}

更新2 :以同样的方式将名称"item.autocomplete"更改为"ui-autocomplete-item".请参见此处.

UPDATED 2: In the same way the name "item.autocomplete" should be changed to "ui-autocomplete-item". See here.

这篇关于如何在自动完成的jQuery UI中突出显示输入的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！