jQuery UI自动完成在contenteditable与多选

Question

我得到jQuery UI自动完成工作contenteditable="true"div通过添加$.fn.val = $.fn.html;到函数的顶部。但是，使用div现在已破坏了在input元素上工作的所有其他功能。诸如设置最少数量的字符并允许多个选择的功能不再有效。我收到错误消息，例如Can't find variable extractLast和TypeError: undefined is not an object (evaluating 'val.split')。有没有办法让jQuery从我的div中拉text()或html()，而不是试图寻找input或textarea的val()？

$(function() { 

    $.fn.val = $.fn.html; 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#div") 
     .autocomplete({ 
      delay: 0, 
      highlightClass: "bold-text", 
      autoFocus: true, 
      search: function() { 
       // custom minLength for multiple selections 
       var term = extractLast(this.value); 
       if (term.length < 3) { 
        $(this).autocomplete("close"); 
        return false; 
       } 
      }, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term))); 
      }, 
      select: function(e, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 
}); 

Answer 1

使用JavaScript的this.innerHTML代替this.value，但是这将检索标签为好。或者使用jQuery的$(this).text()从[Object HTMLDivElement]中获取文本值。