jQuery 入门教程(24): jQuery UI Autocomplete示例（二）_jquery ui 一个页面多个 autocomplete-CSDN博客

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18308403

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加一些事件处理。

 
<!doctype html>
 
<html lang="en">
 
<head>
 
    <meta charset="utf-8" />
 
    <title>jQuery UI Demos</title>
 
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    <script src="scripts/jquery-1.9.1.js"></script>
 
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
 
 
    <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).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>