jQuery UI自動完成不顯示結果

我試圖用mysql查詢的結果填充自動完成，並且選項永遠不會顯示，但我正確地得到了json響應。我試圖在我的主css文件和jquery-ui.css中更改z-index，但它不起作用。jQuery UI自動完成不顯示結果

這是我的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; 
    } 

});

這是我的PHP函數，它的MySQL查詢：

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']))); 

}

來源

2015-05-27 André Villanueva Escarela

用戶數據類型：「JSON」，在$阿賈克斯的功能。 –

不起作用：c –

嘗試改變數據類型爲「 json'放在ajax請求上，並在代碼中放置一些警報來驗證你是否到達那裏（例如成功的內部）。

來源

2015-05-27 14:18:05 BlunT

$("#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 


//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(); 


?>

來源

2015-05-27 14:19:47 Babar

嘗試利用._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>

來源

2015-05-27 14:30:51 guest271314

不起作用：c –

可以描述「不起作用」？，創建stacksnippets，jsfiddle http://jsfiddle.net來演示？ – guest271314

@AndréVillanuevaEscarela查看更新後的文章 – guest271314

jQuery UI自動完成不顯示結果

回答

相關問題