Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Problem with the Search Bar

Hi All,

When I enter text in the search bar , autocomplete feature shows all the related product as expected, But when I remove the text from the input bar and make the text length to 0, it still retains the autocomplete box. Please help me with the related issue. My code is as follows:

JavaScript:
const compare_search_url = window.location.href
const search_wrapper = document.querySelector(".search_input");
const compare_search_first_form = document.getElementById('compare_search_first_form')
const inputBox = document.getElementById("first_search_input");
const suggbox = document.getElementById("first_autocomplete_box");
const compare_search_first_csrf = document.getElementsByName('csrfmiddlewaretoken')[0].value
inputBox.onkeyup = (e)=>{
    send_first_product_compare_data(e.target.value)
}
const send_first_product_compare_data = (first_product_search) => {
    $.ajax({
        type: 'POST',
        url: 'first_product_compare_search/',
        data: {
            'csrfmiddlewaretoken': compare_search_first_csrf,
            'first_product_search': first_product_search,
        },
        success: (res) => {
            first_product_result = res.first_product_result;
            if (Array.isArray(first_product_result)) {
                product_result = res.first_product_result
                if (Array.isArray(product_result)) {
                    product_result = product_result.map((data)=>{
                        return data = '<li>' + data.brand + ' ' + data.model_name + '</li>';
                    });
                    search_wrapper.classList.add("active");
                    showSuggestions(product_result);
                }
                else {
                    // console.log("Anish");
                    if (inputBox.value.length > 0) {
                        suggbox.innerHTML = product_result
                        console.log("Anish");
                    } else {
                        search_wrapper.classList.remove('active')
                    }
                }
                // autocomplete(document.getElementById("search_product"), data);
                // console.log(first_product_result);
            }
            // if(res){
            //     product_result = res.first_product_result
            //     product_result = product_result.map((data)=>{
            //         return data = '<li>' + data.brand + ' ' + data.model_name + '</li>';
            //     });
            //     search_wrapper.classList.add("active");
            //     showSuggestions(product_result);
                // if(inputBox.value.length == 0){
                //     console.log("Anish");
                // }
            // }
        },
        error: (err) => {
            console.log(err)
        }
    })
}
function showSuggestions(list){
    let listData;
    if(!list.length){
        userValue = inputBox.value;
        listData = '<li>' + userValue + '</li>';
    }else{
        listData = list.join('');
    }
    suggbox.innerHTML = listData; 
}
 

New Threads

Buy us a coffee!

Back
Top Bottom