Jquery 具有多个值的自动完成文本区域_Jquery_Autocomplete_Textarea

Jquery 具有多个值的自动完成文本区域

jquery autocomplete

Jquery 具有多个值的自动完成文本区域,jquery,autocomplete,textarea,Jquery,Autocomplete,Textarea,是否有任何代码示例如何创建允许用户键入多个值的自动完成文本区域。自动完成列表的建议必须来自ldap。我使用Spring框架。您研究过jQueryUI自动完成吗您可以为此尝试这些Jquery插件或或 jQuery UI自动完成-多个值 $（函数（）{ var availableTags=[ “动作脚本”， “AppleScript”， “Asp”， “基本”， “C”， “C++”， “Clojure”， “COBOL”， “ColdFusion”， “二郎”， “Fortran”，

是否有任何代码示例如何创建允许用户键入多个值的自动完成文本区域。自动完成列表的建议必须来自ldap。我使用Spring框架。

您研究过jQueryUI自动完成吗

您可以为此尝试这些Jquery插件

或


jQuery UI自动完成-多个值
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
功能拆分（val）{
返回val.split（/，\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
$（“#标签”）
//选择项目时不要离开选项卡上的字段
.bind（“键控”，函数（事件）{
如果（event.keyCode===$.ui.keyCode.TAB&&
$（this.autocomplete（“实例”）.menu.active）{
event.preventDefault（）；
}
})
.自动完成({
最小长度：0，
来源：功能（请求、响应）{
//委托回自动完成，但提取最后一项
响应（$.ui.autocomplete.filter(
availableTags，extractLast（request.term））；
},
焦点：函数（）{
//防止在焦点上插入值
返回false；
},
选择：功能（事件、用户界面）{
var术语=分割（此值）；
//删除当前输入
terms.pop（）；
//添加所选项目
术语推送（ui.item.value）；
//添加占位符以在末尾获得逗号和空格
术语。推送（“”）；
this.value=terms.join（“，”）；
返回false；
}
});
});
标记编程语言：

有关更多详细信息，请访问此链接我使用了textarea而不是输入字段。

在spring中，我应该用什么样的控制器方法来代替“.php”？html并将其映射到返回字符串的方法？嗯，不太可能。看一看：我很难理解返回建议列表的脚本和方法是如何协同工作的。我是个新手。你还能帮我吗？非常感谢。这正是我需要的。其他人似乎也不错，但我喜欢jquery文本CompleteGreat Ans！非常有用

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}

$( "#tags" )
  // don't navigate away from the field on tab when selecting an item
  .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).autocomplete( "instance" ).menu.active ) {
      event.preventDefault();
    }
  })
  .autocomplete({
    minLength: 0,
    source: function( request, response ) {
      // delegate back to autocomplete, but extract the last term
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function( event, 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;
    }
    });
   });
 </script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<textarea id="tags"><textarea>
</div>


</body>
</html>