手搭手Ajax实现搜索地址自动补全功能

以下是一个使用手搭Ajax实现搜索框地址自动补全的简单示例。这个例子假设你已经有了一个HTML输入框和一个显示自动补全建议的列表。

HTML 部分:

<input type="text" id="search-input" placeholder="请输入地址" />
<div id="autocomplete-container" style="display: none;"></div>

JavaScript 部分 (使用手搭Ajax):

document.getElementById('search-input').addEventListener('input', function() {
    var input = this.value;
    if (input.length === 0) {
        document.getElementById('autocomplete-container').style.display = 'none';
        return;
    }
 
    // 创建一个新的Ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/autocomplete?input=' + encodeURIComponent(input), true);
 
    xhr.onload = function() {
        if (this.status === 200) {
            var response = JSON.parse(this.responseText);
            if (response.length > 0) {
                document.getElementById('autocomplete-container').style.display = 'block';
                document.getElementById('autocomplete-container').innerHTML = response.map(function(item) {
                    return '<div>' + item + '</div>';
                }).join('');
            } else {
                document.getElementById('autocomplete-container').style.display = 'none';
            }
        }
    };
 
    xhr.send();
});

后端处理 /autocomplete 请求的路由需要根据实际的后端框架来实现。以下是一个伪代码示例：

# 伪代码示例，使用Python和Flask框架
from flask import Flask, request, jsonify
 
app = Flask(__name__)
 
@app.route('/autocomplete')
def autocomplete():
    input = request.args.get('input')
    # 这里的逻辑需要替换为实际的地址匹配逻辑
    suggestions = [address for address in addresses if address.startswith(input)]
    return jsonify(suggestions)
 
if __name__ == '__main__':
    app.run()

确保替换掉伪代码中的地址匹配逻辑，并且在你的实际应用中实现相应的地址库或数据源。