Question

这是我用来显示值的代码

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'中的值

Answer 1

Jquery UI库具有以下功能：

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

这是另一个Ajax选项：

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

还有这一个：

http://easyautocomplete.com/

Answer 2

您可以使用以下代码自动完成远程/ 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

如何在自动填充功能

2 个答案: