Click here to Skip to main content
15,878,852 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have use this ajax for autocomplete it's working .li append but autocomplete not working
Please check this code
$(function () {
    var apiurl = baseurls + "api/SearchTypeahead/Typeahead";
    $(document).on("keydown.autocomplete", "#searchlist", function () {
        var charLength = $(this).val().length;
        if (charLength >= 3) {
            $("#searchlist").autocomplete({    
                source: function (request, response) {
                    debugger;
                    $.ajax({
                        url: apiurl,
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {

                                if (data.indexOf(item) === -1) {
                                    return { name: "No Results." }
                                } else {
                                    return {
                                        name: item
                                    }
                                }
                            }))

                        }
                    })
                },
                serarch: function () {
                    $(".messagePopup").show();
                    Loader();
                },
                focus: function (event, ui) {
                    jQuery(event.target).val(ui.item.a);
                    return false;
                },
                select: function (event, ui) {
                    var name = ui.item.name.replace(" ", "-");
                    window.location = "/" + name;
                },
                open: function () {
                    //  $(".messagePopup").hide();
                    $('li.ui-menu-item ').removeClass('ui-menu-item');
                },

            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                
                return $("<li></li>")
                    .data("ui-autocomplete-item", item)
                    .append("<a href='javascript:void(0)' style='font:12px'>" + item.name + "</a>")                  
                  .appendTo(ul);

            };
        }
    });
});


What I have tried:

Please this code and let me what's problem
Posted
Updated 26-Jul-21 22:22pm

1 solution

I suspect it's not working because:
on("keydown.autocomplete", ...)

Isn't a valid jQuery event. I think you mean to use "keydown" instead. However that's not the only problem, you're calling the autocomplete() function inside the event handler, but you actually only need to call it once when the document is ready. The autocomplete() function has a property called minLength which you can set to restrict auto-completion.

Remove the keydown event handler and call autocomplete() directly, and provide the minLength property to restrict it.
 
Share this answer
 
Comments
Raju Dhiman 27-Jul-21 5:01am    
I have remove this it's not working.http://jsfiddle.net/uuPGq/ i have use this with static data it's working
Chris Copeland 27-Jul-21 5:05am    
"it's not working" isn't enough to go off of, we need more information on what exactly isn't working. Have you checked the browser console to see what the error is? What is the error you're receiving? Or is it just not triggering?
Raju Dhiman 27-Jul-21 5:26am    
I have use key up and down for set value in input box but not set.This is major issue
Chris Copeland 27-Jul-21 5:43am    
You've not answered the questions I posed in my previous comment though. You say the up and down key events aren't working but you're providing no context. You need to check the browser console and look for potential errors, you may even need to debug the JS file to step through the code to see what isn't working.

Remember that we can't see your screen or the output of your code, so you need to do some work to identify what the new problem is.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900