0

I managed to get jQuery UI autocomplete to work. However since I use it in many input fields I wanted to make it more generic so I don't have to replicate it. So instead of the following code:

$(function() {
    var cache = {};
    $("#searchGuyInput").autocomplete({
        minLength: 2,
        source: function(request, response) {
            // Getting a JSON array to populate the list
            var term = request.term;
            if (term in cache) {
                response(cache[ term ]);
                return;
            }

            $.getJSON("c_select_guy.php", {request: term}, function(data, status, xhr) {
                cache[ term ] = data;
                response(data);
            });
        },
        select: function(event, ui) {
            // What happens once I have selected a name from the list
            if (ui.item){
                createInputField(ui.item.Name + " " + ui.item.Surname,ui.item.guyID);
            }
        }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        // Here I can format the JSON array to display the rows in the list
        return formatted;
    };

    function createInputField(message, guyID) {
        // creates a new div for the selected element
    };    
});

I tried to use:

function autocomp(inputID) {  //CHANGED
    var cache = {};
    $(inputID).autocomplete({ //CHANGED
        minLength: 2,
        source: function(request, response) {
            // Getting a JSON array to populate the list
            var term = request.term;
            if (term in cache) {
                response(cache[ term ]);
                return;
            }

            $.getJSON("c_select_guy.php", {request: term}, function(data, status, xhr) {
                cache[ term ] = data;
                response(data);
            });
        },
        select: function(event, ui) {
            // What happens once I have selected a name from the list
            if (ui.item){
                createInputField(ui.item.Name + " " + ui.item.Surname,ui.item.guyID);
            }
        }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        // Here I can format the JSON array to display the rows in the list
        return formatted;
    };

    function createInputField(message, guyID) {
        // creates a new div for the selected element
    };    
}

autocomp("#searchGuyInput"); //CHANGED

I highlighted the 3 changes with //CHANGED comments for you.

However now even though the autocomplete returns me a nice populated list of elements, when I select from the elements in the autocomplete the ui.item variable in the select function is undefined and it doesn't work anymore!

What am I understanding wrong?

I thought the $(function()); was just a way of defining an anonymous function in javascript and hence if I made it named I could call it multiple times for different input fields.

1
  • 1
    Can you provide a JSFIDDLE, please? Commented Jul 22, 2014 at 18:02

1 Answer 1

0

Found the soluction in this thread: How to create generic (reusable) JavaScript autocomplete function

Apparently calling it as

autocomp("#searchGuyInput");

doesn't work and you need to call it as:

$(function() {
        autocomp("#searchGuyInput");
});

I still don't get what these $(function() calls do so if anyone wants to clarify it I would be very glad.

Sign up to request clarification or add additional context in comments.

1 Comment

$(function() is $(document).ready() which equal to window.onload in pure javascript, so that makes sure the script is run after the page is loaded completely even if the script tag is within the head tag. Hope that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.