jQueryのオートコンプリート表示HTMLコンテンツ

Question

。

それは期待どおりに動作、しかし、私は、私は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); 
        }; 

Answer 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); 
    }; 
}); 

あなたが実装することをお勧めします他のいくつかの変更を確認します。