javascript - Bootstrap typeahead(自动完成)ajax返回多个值

Question

我使用 boostrap typhead 创建自动完成

我想在从自动完成中选择数据时显示，返回2个值并放入输入框和隐藏数据

我发现了两个问题

1. 使用双引号自动完成数据
2. 我无法将 ID BIO 置于隐藏类型中

这是我的代码

PHP

<?php
include "database.php";
$query = $_REQUEST['query'];
$result = mysqli_fetch_object(mysqli_query($con,"select count(*) as total from biodata where NameBiodata LIKE '%".$query."%' "));
    if ($result->total > 0) {
        $data_tsk = mysqli_query($con,"select  IdBio,NameBiodatafrom biodata where NoUrut  NameBiodata LIKE '%".$query."%'");
        $data = array();
        while($tsk=mysqli_fetch_object($data_tsk)){ 
            array_push($data,array('label'=>$tsk->NameBiodata,'value'=>$tsk->IdBio));
        }
        echo json_encode($data);
    }
?>

Javascript

$('#name_biodata').typeahead({
          source: function (query, process) {
            $.ajax({
                url: 'ajax/auto_complete_biodata.php',
                type: 'POST',
                dataType: 'JSON',
                data: 'query=' + $('#name_biodata').val(),
                success: function(data) {
                    var results = data.map(function(item) {
                        var someItem = { myname: item.label, myvalue: item.value};
                        var jsonString = JSON.stringify(someItem.myname);  
                        return jsonString; // I don't know how to remove double qoutes
                        //return jsonString.replace(/\"/g, "");     // I try to remove double qoutes, but not selected
                    });
                    return process(results);
                }
            });
        },
        minLength: 1,
        updater: function(item) {
            var obj = JSON.parse(item);
            console.log(obj);  // i can't get Id BIO :(
            $("#IdBio").val(obj.value);
            return item;
        }
      }); 

JSON

[{"label":"Yeni Adelia Sofiyah als Selvi","value":"151"},{"label":"Yenni Ginting als Kak Yen","value":"276"},{"label":"Ria Wira","value":"572"}]

帮帮我谢谢

Answer 1

1. 双引号是由 JSON.stringify 引起的。当您希望通过 HTTP 请求发送您的 JSON，将您的 JSON 作为字符串回显等时，此方法很有用。在您的情况下，只需使用 var jsonString = someItem.myname;。

2. 您的代码在这里通常是错误的。 source 应该是这样的

来源:[
{name: "name", any: "value", 你: "want"},
{name: "name2", any: "value", 你: "want"}
];

name 字段是必需的。没有它，如果您想传递对象(具有名称和其他值)而不是单个值，则 typeahead 将无法工作。在你的情况下你得到

source: ['one', 'two', 'three', 'etc'];

所以你应该这样做

  source: function (query, process) {
    $.ajax({
        url: 'ajax/auto_complete_biodata.php',
        type: 'POST',
        dataType: 'JSON',
        data: 'query=' + $('#name_biodata').val(),
        success: function(data) {
            var results = data.map(function(item) {
                var someItem = { name: item.label, myvalue: item.value}; 
                return someItem;
            });
            return process(results);
        }
    });
},

现在你会得到

[
  {name: 'name_from_label', myvalue: 'your_value'}
]

就这些。