0

我正在学习 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。谢谢你的帮助。

4

3 回答 3

0

错过了foreach' '之间的空间as

foreach ($rslt as $data){
           //-^^---here
于 2013-09-27T07:17:42.073 回答
0

使用自动完成 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);
});

返回数据格式

{
query:'Li',
suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'],
data:['LR', 'LY', 'LI', 'LT']
}
于 2013-09-27T07:19:26.860 回答
0

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

然后，您的数据不会显示，因为您的输入是隐藏的。删除隐藏属性以显示该字段：

<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;
          }
        });
于 2013-09-27T07:41:24.383 回答