您的位置: 首页  >  IT文章  >  JqueryUI input 自动提示 autocomplete

JqueryUI input 自动提示 autocomplete

分类: IT文章 • 2022-08-01 08:59:30

1、最基础的自动提示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Auto complete</title>

<link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/jquery-ui.min.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"
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      } );
    
</script>

</head>
<body>
<input id="tags" type="text">
</body>
</html>

2、增加一点点后的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Auto complete</title>

<link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">

<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/jquery-ui.min.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"
        ];
        $( "#tags" ).autocomplete({
            source  :   function(test,resp){//test = Object {term: "aaaa"}，resp : 表示返回至下拉框中的数据
                             resp(availableTags);
                         },
             select:       function( event, ui ){//选中时执行
                             alert(121);
                         }
        });
      } );
    
</script>

</head>
<body>
<input id="tags" type="text">


</body>
</html>

小结：JqueryUI的自动提示已经非常完整，地址如是  http://jqueryui.com/autocomplete/

相关推荐