亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

easyAutocomplete 函數停止我的 keyup 處理程序

easyAutocomplete 函數停止我的 keyup 處理程序

皈依舞 2023-05-11 14:06:58
我正在編寫代碼來自動完成我網站上的城市搜索。問題是 ajax 函數一旦被調用,就會阻止對 keyup 事件的后續調用。實際上,一旦輸入中達到三個字符,ajax 調用就會從我正在使用的 API 中獲取數據(在這一點上一切正常),但隨后發生了一些事情,keyup 事件無法再次調用(我的控制臺。日志未被觸發)。這是我的 HTML 代碼:<input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />這是我的 JS 代碼:$(function () {    var minlength = 3;        $('#prova').keyup(function (e) {          var that = this,          value = $(this).val();          console.log("keyup");      if (value.length >= minlength ) {        searchRequest = $.ajax({          type: "GET",          url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",          //async: false,          success: function(results) {            console.log(results);            var aList = results;            var aOptions = [];            for (i = 0; i < aList.length; i++) {              //optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];              optLabel = aList[i].display_name;              aOptions.push(optLabel);            }            var options = {              data: aOptions            };            console.log(options);            $("#prova").easyAutocomplete(options);          }    });  }});});我調試了代碼,我意識到該easyAutocomplete函數是阻止后續 keyup 調用的函數。發生了一些我不明白的事情。easyAutocomplete是一個 Rails gem,但它只不過是 jQuery 的 easyAutocomplete 插件的包裝器。options你能告訴我當我將數組傳遞給函數時會發生什么嗎easyAutocomplete?
查看完整描述

2 回答

?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

好的。嘗試這個。將 lookup.js 更改為以下內容:


let options = {

? ? minCharNumber: 3,

? ? url: function (phrase) {

? ? ? ? return "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json";

? ? },


? ? getValue: "display_name",

? ? list: {

? ? ? ? match: {

? ? ? ? ? ? enabled: true

? ? ? ? }

? ? }

};


$("#prova").easyAutocomplete(options);


現在應該按照你想要的方式工作。如果對您有幫助,請點擊向上箭頭找到答案。這有助于我的排名。此外,如果它已為您解決,請單擊“這解決了我的問題”。


查看完整回答
反對 回復 2023-05-11
?
慕萊塢森

TA貢獻1810條經驗 獲得超4個贊

您可能缺少庫。我讓它與你的 JavaScript 一起工作:我創建了一個名為 lookup 的文件夾。在文件夾中我制作了兩個文件:

  1. 測試.html

  2. 查找.js

  3. 從http://easyautocomplete.com/files/EasyAutocomplete-1.3.5.zip的文件夾中下載并解壓縮 EasyAutocomplete-1.3.5 的代碼

測試.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Lookup</title>

    <link rel="stylesheet" href="EasyAutocomplete-1.3.5/easy-autocomplete.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />

<script src="EasyAutocomplete-1.3.5/jquery.easy-autocomplete.min.js"></script>

<script src="lookup.js" defer></script>

</body>

</html>

查找.js


$(function () {

    var minlength = 3;

    $('#prova').keyup(function (e) {

        var that = this,

            value = $(this).val();

        console.log("keyup");

        if (value.length >= minlength) {

            searchRequest = $.ajax({

                type: "GET",

                url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",

                //async: false,

                success: function (results) {


                    console.log(results);

                    var aList = results;

                    var aOptions = [];


                    for (i = 0; i < aList.length; i++) {

                        //optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];

                        optLabel = aList[i].display_name;

                        aOptions.push(optLabel);

                    }


                    var options = {

                        data: aOptions

                    };

                    console.log(options);

                    $("#prova").easyAutocomplete(options);

                }

            });

        }

    });

});

就是這樣。應該工作正常。希望這對你有幫助。

http://img1.sycdn.imooc.com//645c86550001af2903930584.jpg

查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號