javascript、jQuery、Ajax 自动完成

Question

我需要一些帮助。我正在尝试编写一个 JQuery 自动完成脚本，它将通过 AJAX 调用 url 并在用户将数据输入表单时获得自动完成结果。但是我不断收到

TypeError: $(...).autocomplete is not a function

这是我的代码

$(document).ready(function () {

$(document).ready(function () {
   var test = ["Roanoke", "Salem", "Alexandria", "Buena Vista", "Bedford", "Bristol", 
       "Charlottesville", "Chesapeake", "Clifton Forge"];
   
   $("#city").autocomplete({
        source: test
    });
    
   $("#city").autocomplete({
        source: "city.php"
    });
   
});

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/Style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="script/jscript.js"></script>
    </head>
    <body id = "body">
        <section><label id = "adr">Address:</label>
                    <label id = "add"><input type="text" name="address" id="address" placeholder="enter address"></label>
                    <br>
                    <input type="text" name="city" id="city" placeholder="enter city">
                    <label id = "st"><input type="text" name="state" id="state" placeholder="enter state"></label>
                    <label id = "zi"><input type="text" name="zip" id="zip" placeholder="enter zip code"></label>  
                </form>

            </div>
        </section>

    </body>
</html>

我希望有人能帮助我。

Answer 1

自动完成是 jQueryUI 而非 jQuery 的一部分。在此处阅读有关自动完成的信息：https://jqueryui.com/autocomplete/。该网站还将提供下载链接 jquery ui.

您包含了两个不同版本的 jQuery 但没有 jQuery UI

javascript、jQuery、Ajax 自动完成

javascript, jQuery, Ajax Autocomplete

javascript

ajax

jquery

jquery-ui-autocomplete