使用 json 来自 db 的 JQuery Autocomplete 的源代码答案

【问题标题】：JQuery Autocomplete's source from db using json使用 json 来自 db 的 JQuery Autocomplete 的源代码
【发布时间】：2018-06-26 03:19:42
【问题描述】：

我正在尝试使用来自数据库的源来制作 jquery 自动完成输入字段，并且数据存储在 json 中。我将获得的所有数据存储在一个变量中，如下所示：

当我将 source 设置为该 sinput 字段的值时，我得到了整个句子（这是我的示例所期望的）..但现在我知道有三个单词（第一个 -skijanje，第二个 - vodopoad，第三个 -更多）所以在我的自动完成中有三个选项。这是我使用 php 获取数据的代码：

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("localhost", "user_name", "user_pass", "db_name");
$result = $conn->query("SELECT `title`, `type` FROM " . $obj->table);
$output = array();
$output = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($output);

这是用于读取该数据的 js 代码：

 <script>

        var obj, dbParam, xmlhttp,x , txt = "";
        var i = 0;
        obj = { "table":"tourplan" };
        dbParam = JSON.stringify(obj);
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = "All data: " + this.responseText;
                var myObj = JSON.parse(this.responseText);
                for (x in myObj) {
                    txt += myObj[x].title +" ";

                }
                document.getElementById("demo2").value = txt;
                //document.getElementById("demo2").innerHTML = "Only one field: " + myObj[1].title;
            }
        }
        xmlhttp.open("GET", "tourTitle.php?x=" + dbParam, true);
        xmlhttp.send();
        </script>

<p id="demo"></p>
 <input type="text" id="demo2" value="">

document.getElementByID('demo').innerHTML = "All data: " + this.responseText; 我得到了这个：

所有数据：[{"title":"skijanje","type":"zima"},{"title":"vodopad","type":"jesen - proljece - ljeto"},{"title ":"more","type":"ljeto"}]

这里是为了自动完成：

<script>
$( function() {
    var otherPlaces = [
        txt
    ];

    $("#search-loged").autocomplete({
        source: txt
    });
    });
</script>

有什么改正的方法吗？谢谢

【问题讨论】：

你不使用自动完成 ajax 选项吗？
我不知道怎么用，我现在试试。
@SupunPraneeth - 我怎样才能将从我的数据库（使用 php 和 js /json）获得的数据放入我的数组“otherPlaces”中......这将是我自动完成的来源。跨度>
查看示例：jqueryui.com/autocomplete/#remote

标签： javascript jquery html autocomplete

【解决方案1】：

不要使用纯ajax，试试这样的：

jQuery Ajax

$( function() {    
    $("#search-loged").autocomplete({
        source: 'tourTitle.php',
        minLength: 2,
        select: function( event, ui ) {
          log( "Selected: " + ui.item.value + " aka " + ui.item.id );
        }
    });
});

HTML

<p id="demo"></p>
 <input type="text" id="demo2" value="" name='x'>

PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("localhost", "user_name", "user_pass", "db_name");
$result = $conn->query("SELECT `title`, `type` FROM " . $obj->table);
$output = array();
$output = $result->fetch_all(MYSQLI_ASSOC);

$response = array();
foreach($output as row){
  $response[] = ["value"=>$row['title'],"label"=>$row['title']];
}

echo json_encode($response);

【讨论】：