jQuery: รายการเติมข้อความอัตโนมัติที่กำหนดเองไม่ได้วาดใหม่เมื่อมีการเปลี่ยนแปลงอินพุต

ฉันได้เขียนฟังก์ชันเติมข้อความอัตโนมัติพื้นฐานที่รับอาร์เรย์ข้อมูลและแสดงไว้ใต้แถบค้นหา เมื่อผู้ใช้ป้อนอักขระตัวเดียว ทุกอย่างทำงานได้ดี - รายการจะแสดงรายการที่ตรงกันและการคลิกที่รายการในรายการจะเป็นการปิดรายการและเพิ่มรายการที่คลิกลงในแถบค้นหา อย่างไรก็ตาม หากมีคนต้องการเปลี่ยน/ปรับแต่งค่าการค้นหาด้วยอักขระมากกว่าหนึ่งตัว ฉันสังเกตเห็นว่ามีบางอย่างเกิดขึ้น:

1. ฟังก์ชันจะวาดสำเนาเพิ่มเติม (ด้วยค่าใหม่) ของรายการผลลัพธ์ <ul> แทนที่จะวาดรายการเดิมใหม่

<แข็งแกร่ง>2. การคลิกที่เป้าหมาย <li> ในรายการไม่ได้เป็นการปิดรายการ

ฟังก์ชันนี้จะถูกเรียกใช้เมื่อใดก็ตามที่ตรวจพบ keyup filterAutocomplete รับอินพุตของแถบค้นหาที่เหมาะสมและรับอาร์เรย์ของรายการเพื่อส่งผ่านไปยังฟังก์ชันหลักของฉัน doAutocomplete

$(document).ready(function(){
     $("#projectIDFrom").on('keyup', (function(){
             var val = $(this).val().trim();
             val = val.replace(/\s+/g, '');
             var id = $("#projectIDFrom").attr('id');
             filterAutoComplete(val, id);
             }

        ));      
})

ด้านล่างเป็นฟังก์ชั่นหลัก

    function doAutocomplete(list, storeInput){
     var query = $("#"+storeInput).val()
     var drew = false;
     //assign unique ID to results (handles multiple search bars on a page)
     var resID = storeInput+ "Res";

        //Build the box only if there's a value greater than 0
        //in the target search bar
        if($("#"+storeInput).val().length > 0){

                //Case insensitive search for our array
                var results = $.grep(list, function(item){
                    return item.search(RegExp(query, "i")) != -1;
                });

            //First search (no pre-existing list)
            if(drew == false){
                //Create list for results
                $("#"+storeInput).after("<ul class='autoResult' id='"+ resID +"'></ul>");

                //Prevent redrawing/binding of list
                drew = true;

                //Bind click event to list elements in results
                $("#"+resID).on("click", "li", function(){
                    $("#"+storeInput).val($(this).text());
                    $("#"+resID).remove();
                 });
            }
            //remove if the value in search bar changes
            //redraw occurs on next keypress
            else if (drew == true){
                $("#"+resID).remove();
            }

            //Add matching results to the list
            for(var i = 0; i < results.length; i++){
                $("#"+resID).append("<li>" + results[i] + "</li>");
            }
        }
        //Handle backspace/delete so results don't remain
        else if($("#"+storeInput).val().length < 1){
            $("#"+resID).remove();
        }
}

ฉันจะหลีกเลี่ยงการวาดสำเนารายการผลลัพธ์หลายชุด และรับฟังก์ชันเพื่อวาด/วาดใหม่รายการเดียวด้วยผลลัพธ์ใหม่ได้อย่างไร

ลิงก์ไปยัง JSFiddle ที่สร้างปัญหาที่ฉันอธิบายไว้ข้างต้นซ้ำ

ความช่วยเหลือใด ๆ ที่ชื่นชมอย่างมาก


javascript html jquery autocomplete
person Miega    schedule 05.09.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

ลองวางโค้ดลบก่อนที่จะเริ่มสร้างกล่อง ต่อไปนี้เป็นรหัส ดู jsfiddle

function doAutocomplete(list, storeInput) {
        var query = $("#" + storeInput).val()
        var resID = storeInput + "Res"; //projectIDFromRes
        $("#" + resID).remove();
        //Build the box only if it there's actually a value greater than 0 in the target search bar
        if ($("#" + storeInput).val().length > 0) {

            //Case insensitive search for our  array
            var results = $.grep(list, function (item) {
                return item.search(RegExp(query, "i")) != -1;
            });
            //First search

            //Create list for results
            $("#" + storeInput).after("<ul class='autoResult' id='" + resID + "'></ul>");

            //Prevent redrawing/binding of list


            //Bind click event to list elements in results
            $("#" + resID).on("click", "li", function () {
                $("#" + storeInput).val($(this).text());
                $("#" + resID).remove();
            });

            //Add results to the list
            for (var i = 0; i < results.length; i++) {
                $("#" + resID).append("<li>" + results[i] + "</li>");
            }
        }
    }

ขอแสดงความนับถือ You

person Yeou    schedule 05.09.2017
comment
อา นั่นสมเหตุสมผลกว่ามาก! ดูเหมือนว่าทุกอย่างจะทำงานตามที่คาดไว้ ลองดู JSFiddle ที่อัปเดตแล้ว! - person Miega; 05.09.2017