JqueryUI AutoComplate實現文本框搜索,自動補全效果

JS實現文本框搜索,自動補全效果,參考實現:http://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm


<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Boostrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Type "a" or "s"</p>
         <label for="automplete-1">Tags: </label>
         <input id="automplete-1">
      </div>
   </body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章