单击多个单词时弹出jquery自动完成_Jquery

单击多个单词时弹出jquery自动完成

jquery

单击多个单词时弹出jquery自动完成,jquery,Jquery,有人能帮我在点击这个jquery自动完成时添加弹出效果吗？我可以使用 .bind('focus', function () { $(this).autocomplete("search"); 但它不适用于这个多词的词。那么如何为下面的代码添加弹出效果呢？任何帮助都将不胜感激 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQue

有人能帮我在点击这个jquery自动完成时添加弹出效果吗？我可以使用

.bind('focus', function () {
    $(this).autocomplete("search");

但它不适用于这个多词的词。那么如何为下面的代码添加弹出效果呢？任何帮助都将不胜感激

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/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( "foucus", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-autocomplete" ).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>
 <input id="tags" size="50" />
 </div>


 </body>
 </html>


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

您可以尝试输入

事件。它对我很管用
$('#tags').on('input', function() {
  $(this).autocomplete("search");
});

“多个单词”是什么意思？看看上面的代码，我的意思是当你输入ex php时，autocomplete会显示匹配项，然后你选择它，如果你想再次选择java，你可以。很快，您就可以在一个输入字段上选择多个值（单词），并用逗号分隔。