jQuery 入门教程(24): jQuery UI Autocomplete示例（二）

熊孩纸阅读：658 2021-04-01 09:59:13 评论：0
如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加一些事件处理。
 
       1 
        <!doctype html> 
      
       2 
        <html lang="en"> 
      
       3 
        <head> 
      
       4 
            <meta charset="utf-8" /> 
      
       5 
            <title>jQuery UI Demos</title> 
      
       6 
            <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> 
      
       7 
            <script src="scripts/jquery-1.9.1.js"></script> 
      
       8 
            <script src="scripts/jquery-ui-1.10.1.custom.js"></script> 
      
       9 
          
       10 
            <script> 
      
       11 
                $(function () { 
          
       12 
                    var availableTags = [ 
      
       13 
                      "ActionScript", 
      
       14 
                      "AppleScript", 
      
       15 
                      "Asp", 
      
       16 
                      "BASIC", 
      
       17 
                      "C", 
      
       18 
                      "C++", 
      
       19 
                      "Clojure", 
      
       20 
                      "COBOL", 
      
       21 
                      "ColdFusion", 
      
       22 
                      "Erlang", 
      
       23 
                      "Fortran", 
      
       24 
                      "Groovy", 
      
       25 
                      "Haskell", 
      
       26 
                      "Java", 
      
       27 
                      "JavaScript", 
      
       28 
                      "Lisp", 
      
       29 
                      "Perl", 
      
       30 
                      "PHP", 
      
       31 
                      "Python", 
      
       32 
                      "Ruby", 
      
       33 
                      "Scala", 
      
       34 
                      "Scheme" 
      
       35 
                    ]; 
      
       36 
                    function split(val) { 
          
       37 
                        return val.split(/,\s*/); 
      
       38 
                    } 
      
       39 
                    function extractLast(term) { 
          
       40 
                        return split(term).pop(); 
      
       41 
                    } 
      
       42 
          
       43 
                    $("#tags") 
      
       44 
                    // don't navigate away from the field on tab 
      
       45 
                    //when selecting an item 
      
       46 
                      .bind("keydown", function (event) { 
          
       47 
                          if (event.keyCode === $.ui.keyCode.TAB && 
      
       48 
                              $(this).data("ui-autocomplete").menu.active) { 
          
       49 
                              event.preventDefault(); 
      
       50 
                          } 
      
       51 
                      }) 
      
       52 
                      .autocomplete({ 
          
       53 
                          minLength: 0, 
      
       54 
                          source: function (request, response) { 
          
       55 
                              // delegate back to autocomplete, 
      
       56 
                              // but extract the last term 
      
       57 
                              response($.ui.autocomplete.filter( 
      
       58 
                                availableTags, extractLast(request.term))); 
      
       59 
                          }, 
      
       60 
                          focus: function () { 
          
       61 
                              // prevent value inserted on focus 
      
       62 
                              return false; 
      
       63 
                          }, 
      
       64 
                          select: function (event, ui) { 
          
       65 
                              var terms = split(this.value); 
      
       66 
                              // remove the current input 
      
       67 
                              terms.pop(); 
      
       68 
                              // add the selected item 
      
       69 
                              terms.push(ui.item.value); 
      
       70 
                              // add placeholder to get the 
      
       71 
                              //comma-and-space at the end 
      
       72 
                              terms.push(""); 
      
       73 
                              this.value = terms.join(", "); 
      
       74 
                              return false; 
      
       75 
                          } 
      
       76 
                      }); 
      
       77 
                }); 
      
       78 
            </script> 
      
       79 
        </head> 
      
       80 
        <body> 
      
       81 
            <div class="ui-widget"> 
      
       82 
                <label for="tags">Tag programming languages: </label> 
      
       83 
                <input id="tags" size="50" /> 
      
       84 
            </div> 
      
       85 
        </body> 
      
       86 
        </html>
标签:jquery
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。