如何在自动完成函数中显示值

How to display values in the autocomplete function

本文关键字：函数 显示      更新时间：2023-09-26

这是我用来显示值的代码

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中，我希望它显示在下面的自动完成功能中

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

我该怎么做？注意：代码是可以的，它正在成功地显示div‘result’中的值

Jquery UI库具有以下特性：

http://jqueryui.com/autocomplete/#combobox

这是另一个Ajax选项：

https://github.com/devbridge/jQuery-Autocomplete

还有一个：

http://easyautocomplete.com/

您可以使用以下代码自动完成远程/API数据。使用JQuery UI及其CSS

  $('.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");
                }
            }
        });
    });

对于实时编辑，请使用此Fiddle 进行检查

相关文章：