Javascript 如何在自动完成功能中显示值

这是我用来显示值的代码

function showHint(str) {
var xhttp;
if (str.length == 0) { 
document.getElementById("txtHint").innerHTML = "";
return;
        }
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("txtHint").innerHTML = xhttp.responseText;
document.getElementById("txtHint").style.border="1px solid #ddd";



}
};
xhttp.open("GET", "search.php?q="+str+"&choice="+concept, true); 
xhttp.send();   
}

它当前显示在一个div中，我希望它显示在下面的autocomplete函数中

<input type="text" id="txt1" onkeyup="showHint(this.value)" autocomplete="off">
<div id= "txtHint">
<div id= "result">

我该怎么做？

---

注意：代码正常，正在成功显示div'result'中的值

Jquery UI库具有以下功能：

下面是另一个Ajax选项：

还有一个：

---

您可以使用以下代码自动完成远程/API数据。用它的

---

对于实时编辑，请检查此项

请提供一组示例结果。我尝试了您的方式，但失败了。你能看看我上面的代码，告诉我我的代码需要做哪些更改吗？这些建议来自一个php文件，也不是Jason格式的。

  $('.autosuggest').autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: api + "GetAutoCompleteSuburb?SuburbName=" +   $('[id$=txtSuburb]').val(),
                    dataType: 'json',
                    minChars: 0,
                   cacheLength: 1,
                   max:0,
                      cache: false,
                    delay: 0,
                    success: function (data) {

                        var a = data;
                        response($.map(data, function (item) {
                            return {
                                label: item.split('☺')[0],
                                val: item.split('☺')[1]
                            }
                        }));
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            open: function (e) {
                valid = false;

            },
            select: function (event, ui) {
                valid = true;
                $('[id$=txtSuburb]').val(ui.item.label);
                $('[id$=txtSuburbId]').val(ui.item.val);


            },
            close: function (e) {
                if (!valid) $(this).val('');

            },
            change: function (event, ui) {
                if (ui.item == null || ui.item == undefined) {
                    $('[id$=txtSuburb]').val("");
                    $('[id$=txtSuburbId]').val("0");

                }

            }
        });
    });