Search and sort customers from JSON file I have just completed my first JavaScript/jquery project. It searches customers from .JSON file and sorts them by name or ID. Everything just works fine. The thing is, I am not sure that I have understood all the functions and methods that I have written. Could anyone tell me if this is the best way to read .JSON file and going through the queries that I have written below?

&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;Toolbox Search&lt;/title&gt;
    &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="autocomplete/jquery.easy-autocomplete.min.js"&gt;&lt;/script&gt;
    &lt;link href="autocomplete/easy-autocomplete.min.css" rel="stylesheet" /&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link href="custom.css" rel="stylesheet" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="jumbotron"&gt;
            &lt;div class="col-lg-5"&gt;
                &lt;input type="text" id="KUNDE" size="50" placeholder="Search by name." /&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-2"&gt;
                &lt;button class="btn btn-default" type="button" id="buton" value="search" onclick="find();"&gt;Search&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;ul id="list"&gt;

        &lt;/ul&gt;
        &lt;button id="button"class="btn btn-default"&gt;
            Clean Results
        &lt;/button&gt;
        &lt;div class="footer"&gt;&lt;p&gt; © Copyright 2016&lt;/p&gt; &lt;strong&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/strong&gt;.&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt; 

        $("#button").click(function (e) {//✔
            $("#list").find('li').remove();
        });

        $(function () {//✔
            $("#KUNDE").focus();
        });
        $(document).keypress(function (e) {//✔
            if (e.which == 13) {
                $("#buton").click();
            }
        });


        var uri = 'json.json'; //The encodeURI() function is used to encode a URI. The differences are only the string elements.
        function find() {       //jQUERY find()Method === The find() method returns descendant elements of the selected element.
            var info = $('#KUNDE').val();//JavaScript variables are containers for storing data values.??????????????
            $.getJSON(uri)//The getJSON() method is used to get JSON data using an AJAX HTTP GET request.
                .done(function (data) { //Method accepts one or more arguments, all of which can be either a single function or an array of functions.?????????????
                    var item = data.filter(function (obj) {//A string containing a selector expression to match the current set of elements against.
                        return obj.name === info || obj.ID === info;//The return statement stops the execution of a function and returns a value from that function.
                    })[0];//???????????????
                    if (typeof item !== 'undefined' || item !== null) {//???????????????
                        $("ul").append("&lt;li&gt;ID      = " + item.ID + "&lt;br /&gt;Name    = " + item.name + "&lt;br /&gt;Phone      = " + item.phone + "&lt;br /&gt;Contact       = " + item.contact + "&lt;br /&gt;BalanceLCY      = " + item.balanceLCY + "&lt;br /&gt; CreditLimitLCY       = " + item.creditLimitLCY + "&lt;/li&gt;");//✔
                    }
                })
                .fail(function (jqXHR, textStatus, err) {//?????????
                    $('#list').text('Error: ' + err);//??????
                });
        }
        var options = {//✔
            url: "json.json",
            getValue: "name",
            list: {
                match: {
                    enabled: true
                    }
                },
                theme: "square"
            };
            $("#KUNDE").easyAutocomplete(options);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Your code is really hard to read as noted by @Sumurai8.  That is the first thing that jumps out at you, which is bad.
Consider placing all your javascript code within $(document).ready() handler.  There is no reason any of this code needs to operate in global scope.
Cache your JSON data. There seems to be no reason to continually call getJSON() if you are calling a static file anyway.
Don't keep re-querying the DOM.  If you ever have a case where a selector is going to be used more than once during code operations on a page, you should consider storing the jQuery resource in a variable, so as to minimize queries against the DOM. Of course there is is a trade-off of increased memory consumption for this performance gain, but for most applications, that should not be a concern. Particularly good candidates for this approach are those jQuery selectors that happen within event-handler callbacks that get called repeatedly.
Your filtering condition in the getJSON() success handler does not seem appropriate to me.  I think perhaps the JSON data structure is bad.  Why would you need to iterate over the whole array of searchable objects to figure out which ones meets the keyword criteria?  Why are you then only working with the first returned result that meets this criteria? The data structure should support your desired lookup case. I would consider building a key-based data structure where you combine the keys from the object id and name values and references to applicable objects against that key.  Or alternately have two different data structures - one indexed by id and one indexed by name and make two lookups in response to each find() activity.  Either approach would give operational complexity of O(1) in that the find() operation would take a (relatively) fixed amount of time to execute regardless of the size of the data set you are searching against (once data is loaded).  Your current approach is O(n), such that operation takes linearly longer to complete as the size of your dataset being searched increases. There is no reason at all to make this method perform so poorly.  Between your lack of caching of the data structure and linear complexity, you have a really poorly performing find() function which does all of the following EVERY time the function is called:


You re-load JSON (perhaps via HTTP request, perhaps just from browser cache if lucky) - a costly operation where you read a potentially large string into memory.
You then deserialize that JSON into a javascript array of objects (again a costly operation for potentially large string)
You then iterate every member of that javascript to perform lookup.



You should be striving for a solution where:


Either prior to or with first request to find() you retrieve the JSON data source(s), deserialize them and store them in named javascript variables.
You have a data structure that allows O(1) lookup against the data set.
find() operation uses the stored data structure in javascript to operate against.