ui自动完成上的json数据源问题

Posted 2023-05-08

【中文标题】ui自动完成上的json数据源问题

【英文标题】：Problem with json data source on ui autocomplete

【发布时间】：2019-03-09 15:00:11

【问题描述】：

我的代码有问题。我通过 ajax 接收数据并且它可以工作，但问题是当我尝试搜索一个元素并且所有元素都出现时，因此搜索无法正常工作。

JS 代码：

let marque_id =$("#marque_id").val();
    $( "#grp_name" ).autocomplete(
        source: function( request, response ) 
            $.ajax(
                url:"abonne/ajax_get_grp_autorisation",
                method:"POST",
                dataType: "json",
                data: 
                    marque_id : id_marque
                ,
                success: function( data ) 
                    response( data );
                    console.log(data);
                
            );
        ,
        select: function (event, ui) 
            // Set selection
            $('#grp_name').val(ui.item.label); // display the selected text
            $('#id_grp_selected').val(ui.item.id); // save selected id to input
            return false;
         
    );

php 代码：

$data = array();
while($line = mysqli_fetch_object($liste_grp) )
    $data[] = array("label"=>$line->grp_nom,"value"=>$line->grp_nom ,"id"=>$line->groupement_id);
  
echo json_encode($data);

result

【问题讨论】：

请添加您的实际查询

你说的是mysql查询吗？

什么是id_marque？这似乎不包含request.term。

【参考方案1】：

您应该将您正在搜索的文本发送到 ajax 请求，因此您的自动完成功能应该是

let marque_id =$("#marque_id").val();
    $( "#grp_name" ).autocomplete(
        source: function( request, response ) 
            $.ajax(
                url:"abonne/ajax_get_grp_autorisation",
                method:"POST",
                dataType: "json",
                data: 
                    marque_id : id_marque , 
                    term: request.term       
                ,
                success: function( data ) 
                    response( data );
                    console.log(data);
                
            );
        ,
        select: function (event, ui) 
            // Set selection
            $('#grp_name').val(ui.item.label); // display the selected text
            $('#id_grp_selected').val(ui.item.id); // save selected id to input
            return false;
         
    );

request.term 是您的搜索文本，在您的示例中它是组文本

您还需要修改您的 mysql 查询并添加条件（如） 例如

$rs = mysql_query("SELECT * FROM table WHERE colum LIKE '%" . $_POST['term'] . "%'");

最后你可以查看https://jqueryui.com/autocomplete/#remote-jsonp

【讨论】：

OP 没有使用mysql，而是使用mysqli。这也将开放给 SQL 注入。

这只是向他展示我所说的 like word 的示例，但在他的代码中他应该使用 pdo 并使用绑定函数来防止 SQL 注入

非常感谢我找到了另一个我使用 tokenInput 的解决方案，它的工作 loopj.com/jquery-tokeninput

【参考方案2】：

我建议使用以下 jQuery：

$( "#grp_name" ).autocomplete(
  source: function(request, response) 
    $.ajax(
      url:"abonne/ajax_get_grp_autorisation",
      method:"POST",
      dataType: "json",
      data: 
        marque_id: request.term
      ,
      success: function( data ) 
        console.log(data);
        response(data);
      
    );
  ,
  select: function (event, ui) 
    // Set selection
    $('#grp_name').val(ui.item.label); // display the selected text
    $('#id_grp_selected').val(ui.item.id); // save selected id to input
    return false;
   
);

这是一个小改动。这会将request.term 发送到您的PHP 脚本。例如，如果用户键入“gro”，这将被发送到您的脚本并通过以下方式访问：

$_POST['marque_id']

这假设您的 SQL 查询类似于：

$stmt = $mysqli->prepare("SELECT * FROM table WHERE column LIKE '?%'");
$stmt->bind_param("s", $_POST['marque_id']);
$stmt->execute();
$liste_grp = $stmt->get_result();
$data = array();
while($line = $liste_grp->fetch_assoc()) 
  $data[] = array(
    "label" => $line['grp_nom'],
    "value" => $line['grp_nom'],
    "id" => $line['groupement_id']
  );

$stmt->close();
header('Content-Type: application/json');
echo json_encode($data);

这使用MySQLi Prepared Statement，有助于防止 SQL 注入。我还将 JSON Header 包含在内作为良好实践。搜索"gro" 的结果将类似于：

[
  
    "label": "GROUPE DATAPNEU TEST",
    "value": "GROUPE DATAPNEU TEST",
    "id": 1
  
];

【参考方案3】：

谢谢大家，我找到了一个效果更好的解决方案 我使用了带有许多选项的 tokeninput

http://loopj.com/jquery-tokeni

$.ajax(
        url:"ajax_get_societe_authorisation",
        method:"POST",
        scriptCharset: "iso-8859-1",
        cache: false,
        dataType: "json",
        data: 
            marque_id : id_marque
        ,
        success: function( data ) 
        console.log(data);
        $("#soc_name").tokenInput(data
        ,
            tokenLimit: 1,
            hintText: "Recherche une société par son nom",
            noResultsText: "Aucune société trouvé",
            searchingText: "Recherche en cours ...",
            onAdd: function (data) 
                $("#soc_id").val(data.id);
            ,
            onDelete: function (item) 
                $("#soc_id").val("");
            
        

    );
    
    );