Question

我正在学习jQuery，我想使用自动完成功能。但我不知道为什么我的数据不会显示在我的HTML中。你能解释一下这个源代码中出了什么问题。

<?php 
// receive data
if(isset($_GET['q'])) {
    $q = addslashes(htmlspecialchars($_GET['q']));          // protection
    require_once('../required.php');
    //our request
    $rslt= $pdoSearch->findCity($q);
    $tab=array();
    foreach ($rslt as $data){
        array_push($tab,
            array(
                "label" => $data['fistname']." ".$data['lastname']." ".$data['login']." ".$data['mdp']." ".$data['city'],
                "value" => $data['id']
            )
        );
    }
    echo json_encode($tab);
} ?>

我的自动填充文件：

$(function(){
    $('#search').autocomplete({
        source: 'fichier.php',
        select: function (event, ui) {
            $("#search").val(ui.item.label);
            $("#id").val(ui.item.value);
        }
    });

    $('#button').click(function() {
        $("#id").val();
    });     
});

我的HTML文件：

<fieldset  id="field" >
    <legend>Fonctionnalit&eacute;s</legend><br />
    <form class="icon" method="get">
        <label for="search">Recherche: </label>
        <input id="id" name="id" hidden="hidden" />
        <input type="text" id="search" style="width: 600px;"/>
        <input type="submit" id="button"/>
    </form>
</fieldset>

提前感谢您的帮助。最好的问候，

编辑：我发现了我的问题，我在html中使用了同名的其他ID ..感谢您的帮助。

Answer 1

在foreach中' '之间错过了as

foreach ($rslt as $data){
           //-^^---here

Answer 2

使用autocomple jquery插件 http://www.devbridge.com/projects/autocomplete/jquery/

添加js个文件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

输入框

<input type="text" name="q" id="query" />

的Javascript

var options, a;
jQuery(function(){
   options = { serviceUrl:'your service' };
   a = $('#query').autocomplete(options);
});

Retun data formate

{
query:'Li',
suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'],
data:['LR', 'LY', 'LI', 'LT']
}

Answer 3

首先，确保你的php通过控制fichier.php文件的结果返回一个格式良好的json。显示它以控制其内容。

然后，由于您的输入被隐藏，因此不会显示您的数据。删除隐藏的attribut以显示该字段：

<input id="id" name="id" type="text" />

对于您的自动完成元素，无需使用

$("#search").val(ui.item.label);

选择所需的项目时，这应该会自动运行。这是一个例子：

$('#search').autocomplete({
      source: 'fichier.php',
      autoFocus: true,
      minLength: 2, //minimum 2 chars to execute an autocomplete
      select: function (event,ui) {        
          $('#id').val(ui.item.id);
return false;
          }
        });

自动完成jQuery显示数据

3 个答案: