当前位置:编程学习 > JAVA >>

求Jquery的自动完成的实现代码。

网上看了好多,但我实在是看不懂。
我需要的是ajax传当前输入框的值,进入后台。取出对应的提示,
然后加入到自动完成里面。

找了很久了,网上 例子看了好多,但还是不会用。求助!!!  --------------------编程问答-------------------- 有类似的jquery 的插件。你搜下。 --------------------编程问答-------------------- 导入jquery和jquery-ui,其中有个autocomplete方法。 --------------------编程问答-------------------- ajax有回调函数。

$.get(url,function(){
    alert("1");
}) --------------------编程问答--------------------
引用 1 楼 rui888 的回复:
有类似的jquery 的插件。你搜下。

我知道 是一个 autocomplete的组件,但具体不知道怎么用啊。网上有说明,但我试了下,没办法实现异步加载参数。 --------------------编程问答--------------------
引用 2 楼 ghostkngiht 的回复:
导入jquery和jquery-ui,其中有个autocomplete方法。

求使用 代码。
我要求的是,在input输入值后,把值传到后台,后台得到对应的提示,然后传到前台,显示在自动完成里面。 --------------------编程问答--------------------
<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <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>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>
 
 
</body>
</html>


代码都封装好了。你只要把你后台取的数据取下就可以了啊
  source: availableTags  。这个availableTags   就是你后台取到的数据 --------------------编程问答--------------------
引用 5 楼 ccz616464038 的回复:
Quote: 引用 2 楼 ghostkngiht 的回复:

导入jquery和jquery-ui,其中有个autocomplete方法。

求使用 代码。
我要求的是,在input输入值后,把值传到后台,后台得到对应的提示,然后传到前台,显示在自动完成里面。


                $('#search-in').autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "SimpleSearch",
                            dataType: "json",
                            data: {
                                lang: $('input:radio[name="lang-radio"]:checked').val(),
                                input: $.trim($('#search-in').val()),
                                opr: "inputprompt"
                            },
                            success: function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        label: item,
                                        value: item
                                    };
                                }));
                            }
                        });
                    },
                    select: function(event, ui) {
                        searchText(ui.item ? ui.item.label : this.value);
                    }
                });

这是以前也的一个,供你参考吧 --------------------编程问答-------------------- 另外需要导入这两个

        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
--------------------编程问答--------------------  http://www.open-open.com/ajax/AutoComplete.htm --------------------编程问答--------------------     <link href="/static/auto/css/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="/static/auto/jquery.ui.autocomplete.js" type="text/javascript"></script>
    <script src="/static/auto/jquery.ui.core.js" type="text/javascript"></script>
    <script src="/static/auto/jquery.ui.position.js" type="text/javascript"></script>
    <script src="/static/auto/jquery.ui.widget.js" type="text/javascript"></script>
//自动完成
            jQuery("#name").autocomplete({
                source: function (request, response) {
                    jQuery.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/talent/search?name=" + request.term,
                        dataType: "json",
                        success: function (data) {
                            jQuery(".ui-autocomplete").css({
                                'left':offsetX,
                                'top':offsetY
                            });
                            response(jQuery.map(data, function (item) {
                                return {
                                    value: item.name+"   "+item.projectName,
                                    selectProjectId:item.projectId,
                                    selectName:item.name
                                };
                            }));

                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
//                    alert(ui.item.value);
//                    alert(ui.item.selectName);
//                    alert(ui.item.selectProjectId);
                    window.location="/talent/edit?projectId="+ui.item.selectProjectId+"&name="+ui.item.selectName;
                }
            });
补充:Java ,  Web 开发
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,