jquery自动完成没有在下拉列表中显示结果，只有空白行答案

【问题标题】：jquery autocomplete not showing result on dropdown list, only blanks rowjquery自动完成没有在下拉列表中显示结果，只有空白行
【发布时间】：2018-09-10 19:10:04
【问题描述】：

开始说我第一次接触 jquery 和 ajax 只是为了开发一个小网站来帮助我的工作社会提高生产力。我一直在这里寻找答案，但似乎没有人遇到我同样的问题。抱歉我的英语不好，我将向您展示我正在使用的代码，希望有人能提供帮助。

这里是 php。

<?php 
try {
    $dbh = new PDO ("mysql:host=localhost;port=33000;dbname=magazinoacc", 'root', 'administrator');
} 
catch (PDOException $e) {
    echo "Errore: " . $e->getMessage();
    die();
}
// var_dump($_POST);exit;
if (! isset($_GET['term'])) {
    $q="%";
} else {
    $q=$_GET['term']."%";
}
$sql="  SELECT *
        FROM pv
        WHERE Cliente like :q;";
$stmt=$dbh->prepare($sql);
$stmt->bindparam(':q',$q);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
 $stringa = [];
foreach($rows as $row){
    $stringa[] = array(
        'cliente' => $row['Cliente'],
        'localita' => $row['Località'],
        'indirizzo' => $row['Indirizzo'],
    );
    // $stringa.=sprintf('{cliente :" %s" localita" : "%s" indirizzo: "%s"},', $row['Cliente'], $row['Località'], $row['Indirizzo']);
}
// echo '['.substr($stringa,0,-1).']';
echo json_encode($stringa)
?>

这里是脚本

$(document).ready(function(){
        $("#cliente").autocomplete({
            minLength: 2,
            source: function(request, response) { 
                $.ajax({
                    url:"ajax.php",
                    data:  {
                        mode : "ajax",
                        term : request.term,
                    },
                    dataType: "json",
                    success: function(data)     {

                        response(data);
                        console.log(data);
                    }
                });
           },
           select:  function(e, ui) {
                $('#localita').val(ui.item.localita);
                $('#indirizzo').val(ui.item.indirizzo);

            }
        });
});

这里是html

<table>
<form method="post">
    <tr>
        <td class="sx">value: </td>
        <td class="dx"><input type="text" size="50"  name="cliente" id="cliente">
        </td>
    </tr>
    <tr>
        <td class="sx">label: </td>
        <td class="dx"><input type="text" size="50"  name="localita" id="localita">
        </td>
    </tr>
    <tr>
        <td class="sx">label: </td>
        <td class="dx"><input type="text" size="50"  name="indirizzo" id="indirizzo">
        </td>
    </tr>
</form>

结果是这样的： image of the results

（无法显示更多细节）如您所见，脚本返回了正确的 JSON 数组，但是在下拉列表中，我看不到任何内容，只有包含正确结果的黑色行。为什么它们是空白的？

感谢您的建议

【问题讨论】：

如果你用这个怎么办：pastebin.com/RUMYzJNT?
如果发送的 json 格式为 - [{"value":"america"},{"value":"argentina"}]
@KarloKokkak 如果你看到图片，返回值与 [{"cliente" : ".....", "localita" : "....", "indirizzo" 完全一样: "....."}, ....] 事实上，如果我只使用 source: 'ajax.php' 结果是一样的，我可以用正确的结果填充其他字段
不是。它们被命名为 - cliente、localita 和 indirizzo。他们应该被标记为"value:"。
是因为自动完成无法将标签识别为客户？

标签： php jquery ajax autocomplete jquery-ui-autocomplete

【解决方案1】：

似乎您没有传递正确的 Json 输出。而且您的自动完成 js 脚本编码不正确。

试试下面的代码。看看它们是否有效。

PHP：

<?php 
try {
    $dbh = new PDO ("mysql:host=localhost;port=33000;dbname=magazinoacc", 'root', 'administrator');
} 
catch (PDOException $e) {
    echo "Errore: " . $e->getMessage();
    die();
}
// var_dump($_POST);exit;
if (! isset($_GET['term'])) {
    $q="%";
} else {
    $q=$_GET['term']."%";
}
$sql="  SELECT *
        FROM pv
        WHERE Cliente like :q;";
$stmt=$dbh->prepare($sql);
$stmt->bindparam(':q',$q);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
 $stringa = [];
foreach($rows as $row){
    $stringa[] = array(
        'label' => $row['Cliente'],
        'value' => $row['Cliente']
    );
    // $stringa.=sprintf('{cliente :" %s" localita" : "%s" indirizzo: "%s"},', $row['Cliente'], $row['Località'], $row['Indirizzo']);
}
// echo '['.substr($stringa,0,-1).']';
echo json_encode($stringa)
?>

脚本：

$(document).ready(function(){
        $("#cliente").autocomplete({
            source: 'ajax.php'
        });

        $("#localita").autocomplete({
            source: 'ajax.php?from=localita'
        });

         $("#indirizzo").autocomplete({
            source: 'ajax.php?from=indirizzo'
        });
});

【讨论】：

它不起作用，而是将此pastebin.com/trWB2w8H 添加到我的代码中，它可以显示下拉列表，但自动完成失败
更新了 PHP 文件。再次测试。
我稍后再试，但您似乎只返回 Cliente 但我还需要显示“localita”和“indirizzo”。
让我知道以上是否可行，然后让我们转到其他两个。
它很有效，因为您只传递了一个值...我正在尝试传递 3 个或更多值来填充 3 个或更多字段...这 -> pastebin.com/trWB2w8H 正在下降向下列表，但无法填充字段，可能是由于我对操纵响应数据的无知...

【解决方案2】：

经过一番尝试，我设法使用此脚本解决了问题。它显然可以更简化或优化，但我认为我应该很高兴^^

$(document).ready(function(){
        $("#cliente").autocomplete({
            minLength: 2,
            source: function(request, response) { 
                $.ajax({
                    url: 'ajax.php',
                    data:  {
                        mode : "ajax",
                        term : request.term,
                    },
                    dataType: "json",
                    success: function(data){
                        response($.map(data, function (oggetto) {
                             return oggetto.cliente + "|" + oggetto.localita + "|" + oggetto.indirizzo ;
                         }))
                        console.log(data);
                    }
                });
           },
           focus: function(event, ui) {
              var stringasplit=ui.item.value.split("|");
               var cliente=stringasplit[0];
               var localita=stringasplit[1];
               var indirizzo=stringasplit[2];
              event.preventDefault();
                $('#cliente').val(cliente);
                $('#localita').val(localita);
                $('#indirizzo').val(indirizzo);
                console.log(ui.item.value);
            },
          select:  function(event, ui) {
              var stringasplit=ui.item.value.split("|");
               var cliente=stringasplit[0];
               var localita=stringasplit[1];
               var indirizzo=stringasplit[2];
              event.preventDefault();
                $('#cliente').val(cliente);
                $('#localita').val(localita);
                $('#indirizzo').val(indirizzo);
                console.log(ui.item.value);
            },
        });
});

【讨论】：