jQuery UI 自动完成不显示结果答案

【问题标题】：jQuery UI Autocomplete doesn't display the resultsjQuery UI 自动完成不显示结果
【发布时间】：2015-08-09 16:38:10
【问题描述】：

我正在尝试使用 mysql 查询的结果填充自动完成功能，但选项从未显示，但我正确地获得了 json 响应。我试图更改我的主 css 文件和 jquery-ui.css 中的 z-index，但它不起作用。

这是我的 jquery 函数。

$('#tasklist').autocomplete({

    source: function(request, response) {

        $.ajax({

            url: 'pruebaproy.php',
            type: 'GET',
            data: {term: request.term},
            success: function(data) {

                response( $.map( data, function ( item ) {
                    return item;

            }));

            }

        });

    },
    minLength: 2,
    focus: function( event, ui ) {
        $('#tasklist').val( ui.item.nombre );
        return false;
    }

});

这是我执行 mysql 查询的 PHP 函数：

public function showTasks($term) {

    include 'Conexion.php';    
    $conectar = new Conexion();
    $arr_res = array();

    $consulta = "SELECT * FROM Actividades WHERE nombre LIKE '%".$term."%'";    

    if($stmt = $conectar->open()->query($consulta)) {

        while($row = $stmt->fetch_array(MYSQL_ASSOC)) {

            $task['id'] =  utf8_encode($row['idActividades']);
            $task['nombre'] =  utf8_encode($row['nombre']);
            $task['cat'] =  utf8_encode($row['parteAsoc']);

            array_push($arr_res, $task);

        }

        echo json_encode($arr_res);

    }

    $stmt->close();

}

我在我的 'pruebaproy.php' 中调用这个函数

include('Proyecto.class.php');
$proyect = new Proyecto();


if(isset($_GET['term'])) {

    $proyect->showTasks(trim(strip_tags($_GET['term'])));

}

【问题讨论】：

用户数据类型："json"，在$ajax函数中。

标签： php jquery mysql oop autocomplete

【解决方案1】：

尝试使用 ._renderItem 。见Custom data and display“viewsource”

$('#tasklist').autocomplete({    
    source: function(request, response) {    
        $.ajax({    
            url: 'pruebaproy.php',
            type: 'GET',
            data: {term: request.term},
            success: function(data) {    
                response( $.map( data, function ( item ) {
                    return item
                })    
            }    
        });    
    },
    minLength: 2,
    focus: function( event, ui ) {
        $('#tasklist').val( ui.item.nombre );
        return false;
    }
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.id + "<br>" + item.cat + "</a>" )
    .appendTo( ul );
  };
});

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.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
    }).autocomplete("instance")._renderItem = function(ul, item) {
      console.log(ul, item)
      return $("<li>")
        .append("<b style=color:orange;>" + item.label + "</b>")
        .appendTo(ul);
    };
    });
  </script>
</head>

<body>

  <div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
  </div>


</body>

【讨论】：

可以描述“不起作用”吗？，创建stacksn-ps，jsfiddlejsfiddle.net演示？
最后还是z-index的问题……谢谢大家。

【解决方案2】：

$( "#city" ).autocomplete({
source: function( request,response ) {
    $.ajax({
      url: "dtautocomplete.php",
      dataType: "json",
        data: {term: request.term},

      success: function( data) {

   response( data.myData );

}


    });
  },
  select: function( ) {

 $( "#city" ).attr("selectflag","1");

}

});

php端

<?php


//die("sleeeeeeeeeeeeeeeppppppppppppppppppppppppppppppppppppppppppppppp");
$term=$_GET['term'];
$query="SELECT `RegionName`, `CenterLatitude`,`CenterLongitude` FROM `regioncentercoordinateslist` WHERE `RegionName` LIKE '".$term."%' AND `RegionName` NOT LIKE '%type%' LIMIT 10";          
      // echo $query;
       $data= mysql_query($query);

       //var_dump($data);die();
       $count=0;
       while($dat=mysql_fetch_array($data)) 
       {
         if($count>12)
         {break;}


        $tmpt1=$dat['CenterLatitude'];
          $tmpt2=$dat['CenterLongitude'];
          $tmpt=$tmpt1.",".$tmpt2;
         $city[] = array(
        'label' =>$dat['RegionName'],
        'value' => $tmpt

    );
    $city2[] = $dat['RegionName'];
    $options['myData'][] = array(
    'label' =>$dat['RegionName'],
        'value' => $dat['RegionName']
); 



    $name=$dat['RegionName'];
//  echo "<div>$name</div>";
        $count++;

       }



      echo json_encode($options);
        //flush();


 ?>

【讨论】：

【解决方案3】：

尝试在 ajax 请求上将数据类型更改为“json”，并在代码中放置一些警报以验证您是否到达那里（例如在成功内）。

【讨论】：