jQuery自动完成显示Html内容

问题描述：

在我的Asp.Net项目中，我在其中一个文本框中使用了jQuery自动完成功能。jQuery自动完成显示Html内容

它按预期工作，但我发现一个问题，当我按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'。你能设置一些小例子来分享一些数据吗？ – Twisty

能够创建下面的小提琴：https：//jsfiddle.net/Twisty/awo07frf/ - 我认为问题是HTML元素不能存储在文本框中。元素期望值为字符串。该字符串未呈现。我认为你想要做的是使用样式来格式化字段中的文本，而不是尝试使用标记。 – Twisty

答

您将要使用的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); 
    }; 
});

你会看到，你可能需要实施一些其他的变化。

jQuery自动完成显示Html内容

相关推荐