iPhone Web 应用程序的自动完成ajax 文本框

iphone

实现 iphone Web 应用程序中的自动完成 Ajax 文本框

html
<script src="https://code.jquery.com/jquery-3.6.4.min.JS"></script>

html
<input type="text" id="autocomplete-input" placeholder="输入关键词">
<div id="suggestions-contAIner"></div>

Javascript
$(document).ready(function () {
    $("#autocomplete-input").on("input", function () {
        var userInput = $(this).val();
        $.Ajax({
            url: "your_server_endpoint.php",  // 替换为实际的服务器端点
            method: "GET",
            data: { query: userInput },
            success: function (data) {
                displaySuggestions(data);
            },
            error: function () {
                console.log("Ajax请求失败");
            }
        });
    });
});

Javascript
function displaySuggestions(suggestions) {
    var suggestionsContAIner = $("#suggestions-contAIner");
    suggestionsContAIner.empty();
    if (suggestions.length > 0) {
        for (var i = 0; i < suggestions.length; i++) {</p>            var suggestion = suggestions[i];
            var suggestionItem = $("<div class='suggestion-item'>" + suggestion + "</div>");
            suggestionItem.click(function () {
                $("#autocomplete-input").val($(this).text());
                suggestionsContAIner.empty();
            });
            suggestionsContAIner.append(suggestionItem);
        }
    } else {
        suggestionsContAIner.html("
无匹配结果
");
    }
}

php
<?php</p>$query = $_GET['query'];  // 获取前端传递的用户输入
// 在这里执行与输入相关的查询，获取建议数据
// 假设建议数据存储在 $suggestions 数组中
$suggestions = ["建议1", "建议2", "建议3"];
echo JSon_encode($suggestions);
?>

要实现iphone Web应用程序中自动完成的Ajax文本框，你可以使用JavaScript来监听输入框的变化，然后通过Ajax请求从服务器获取数据，最后将获取到的数据展示在下拉列表中供用户选择。