关闭搜索(ESC)
搜索标签:

jquery插件autocomplete

2015-01-25 浏览:670 标签: autocomplete 插件

自动补足插件autocomplete使用方式。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.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>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

利用ajax后台获取

$("#searchInput").autocomplete({
    source: function(request, response) {
    $.ajax({
        url: "suggester/video.htm",
        data: {keyword: $("#searchInput").val()},
        dataType: "json",
        success: function( data ) {
        response(data);
    }
    });
    },
    delay: 300
});
添加评论