jQuery AutoComplete 显示 Html 内容答案

【问题标题】：jQuery AutoComplete display Html contentjQuery AutoComplete 显示 Html 内容
【发布时间】：2017-04-21 08:53:16
【问题描述】：

在我的 Asp.Net 项目中，我在其中一个文本框中使用了 jQuery AutoComplete。

它按预期工作，但我发现其中一个问题是，当我按下 keydown or keyup 时，它会在文本框中显示 Html 内容。

我的代码：

$(".inputText").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "/URL/Path",
                            data: JSON.stringify({ prefixText: inputvalue.value }),
                            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, "<b style='background-color: #efbc04;font-color:black;'>$1</b>"),
                                        val: item.split('$')[1],
                                        desc: item.split('$')[2]
                                    }
                                }))
                            },

                            error: function (result) {
                                alert("Error");
                            }

                        });
                    },
                    select: function (event, ui) {
                        $(".inputText").val(ui.item.desc);
                        __doPostBack("txtFirstName", "OnTextChanged");
                        return false;
                    }
                })
                .data("autocomplete")._renderItem = function (ul, item) {
                    return $("<li></li>")
                 .data("item.autocomplete", item)
                  .append('<a>' + item.label + '</a>')
                  .appendTo(ul);
                  };

【问题讨论】：

我看到你在 AJAX 中传递了inputvalue.value，但我看不到它是在哪里定义的。我建议使用request.term。你能用一些示例数据设置一个小提琴来分享吗？
能够创建以下小提琴：jsfiddle.net/Twisty/awo07frf - 我认为问题在于 HTML 元素不能存储在文本框中。该元素需要一个字符串作为值。该字符串未呈现。我认为您想要做的是使用样式来格式化字段中的文本，而不是尝试使用标记。

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

您将希望使用focus 事件。

工作示例：https://jsfiddle.net/Twisty/awo07frf/4/

JavaScript

$(function() {
  $(".inputText").autocomplete({
      source: function(request, response) {
        $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "/echo/json/",
          data: JSON.stringify({
            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, "<b style='background-color: #efbc04;font-color:black;'>$1</b>"),
                val: item.split('$')[1],
                desc: item.split('$')[2]
              }
            }))
          },
          error: function(result) {
            alert("Error");
          }
        });
      },
      focus: function(event, ui) {
        $(".inputText").val(ui.item.desc);
        return false;
      },
      select: function(event, ui) {
        $(".inputText").val(ui.item.desc);
        __doPostBack("txtFirstName", "OnTextChanged");
        return false;
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .data("item.autocomplete", item)
        .append('<div>' + item.label + '</div>')
        .appendTo(ul);
    };
});

您会看到一些您可能想要实施的其他更改。

【讨论】：