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

Posted 2023-05-08

【中文标题】jquery自动完成没有在下拉列表中显示结果，只有空白行

【英文标题】：jquery autocomplete not showing result on dropdown list, only blanks row

【发布时间】：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:"。

是因为自动完成无法将标签识别为客户？

【参考方案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);
            ,
        );
);