Question

我已经知道如何从数据库/ sql的角度设计建议，但我不知道如何进行实际获取文本字段以显示带有建议的下拉列表的基本设计。我假设最好的例子是以下链接：http://forums.zybez.net/runescape-2007-prices

其中有一个字段说：“查找价格”。如果你开始输入，它将轮询数据库（我假设）并给你一个下拉列表。我正在试图弄清楚如何做到这一点。

为了简单起见，一旦你开始输入，我对使用一个总是弹出同样东西的数组的例子非常满意。

我看了这个，也许我只是看错了，但我完全失去了，因为没有HTML元素（我能找到），它允许你键入文本字段，而它充当下拉框。

Answer 1

在输入字段中添加一个事件监听器：

input.addeventlistener('change', function () {
    var response = callServer(),
        arr = JSON.parse(response),
        parentDiv = document.getElementById('list');

    //fill the options in the document
    for(var x = 0; x < arr.length; x++) {
        var span = document.createElement('span');
        span.innerHTML = response[x].someOption;

        //add each autocomplete option to the 'list'
        parentDiv.appendChild(span);
    };

    //show the list with all the spans within it
    parentDiv.style.display = 'block';
});

然后，当输入被更改时，调用callServer函数，该函数将ajax查询发送到url并返回JSON对象：

function callServer () {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //return the JSON object
            return xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

只需从您的服务器返回一个JSON对象即可进行javascript解析。要让选项显示为＆＃39;下拉＆＃39;，只需创建一个div元素，设置div的样式以确保它显示在元素下方，然后使用动态创建的跨度填充div。

因此，动态创建的HTML将如下所示：

<div id='list'>
    <span>Some Option 1</span>
    <span>Some Option 2</span>
    <span>Some Option 3</span>
    <span>Some Option 4</span>
</div>

其他效果，如:hover，都是用css完成的。您还可以向每个范围添加onclick，以模拟用户选择该选项。

HTML - 输入[TEXT]下拉列表并提供相关建议

1 个答案: