Question

我是jquery的新手。我正在尝试为文本字段组合自动完成功能。到目前为止，我能够获取输入，进行ajax调用，获取json响应并使用数据构建数组。但是，我无法在自动完成中显示该数据。这是我的javascript代码。我不确定它是一个CSS问题还是一个javascript问题。我添加了jquery-ui.css。请指教。

$(document).ready(function() {

        function SearchText() {
            $("#text-drug").autocomplete({
                minLength: 3, 
                source: function(request, response) {
                    $.ajax({
                        type: "GET",
                        url: "url",
                        beforeSend: function( xhr ) {
                            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                        },
                        success: function (data) {
                            if (data != null) {
                            var parsedJson = $.parseJSON(data);
                            alert(parsedJson);
                            var arr = [];
                            for (var i=0;i<parsedJson.length;++i)
                                {
                                    arr.push(parsedJson[i].name);
                                }
                                alert(arr);
                            response(arr);                                }
                        },
                        error: function(result) {
                            alert("Error");
                        }
                    });
                }

            });
        }

}）;

Answer 1

这是我测试的类似代码，它工作正常。请查看是否可以帮助您找到代码的问题。

<强> 1。的index.html

<!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() {
            $( "#txtAutocomplete" ).autocomplete({
                minLength: 3,
               source: function(request, response) {
                    $.ajax({
                        type: "GET",
                        url: "data.php",
                        beforeSend: function( xhr ) {
                            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                        },
                        success: function (data) {
                            if (data != null) {
                            var parsedJson = $.parseJSON(data);
                            //alert(parsedJson);
                            var arr = [];
                            for (var i=0;i<parsedJson.length;++i)
                                {
                                    arr.push(parsedJson[i].name);
                                }
                                //alert(arr);
                            response(arr);                                }
                        },
                        error: function(result) {
                            alert("Error");
                        }
                    });
                }
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <input id="txtAutocomplete">
      </div>
   </body>
</html>

<强> 2。 data.php

<?php
    echo "[{\"name\":\"programmer\"},{\"name\":\"stackoverflow\"}]";
?>

<强>输出

您可能还需要使用请求对象中的term属性过滤数据。有关详细信息，请参阅JQuery UI Autocomplete Documentation。

自动完成jquery与ajax无法填充

1 个答案: