Question

I’ve basically got 2 events. The top one selects the selection from a jQuery autocomplete and outputs it to the div searchresultdata. The second one takes the content from #*search_input* and outputs it to searchresultdata

var devices = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];

$("#search_input").autocomplete({
    source: devices,
    select: function(e, i) {

        var search_input = i.item.value;
        document.getElementById('searchresultdata').innerHTML = search_input;
    }
});

//Append div with contents from function sendSelected
$("#search_input").on("keyup change", function() {
    var search_input = $(this).val();
    if (search_input.length > 1 || search_input == '*') {
        document.getElementById('searchresultdata').innerHTML = "Everything";
    }

    document.getElementById('searchresultdata').innerHTML = search_input;
});

For a live example see:
http://jsfiddle.net/k2SMb/4/

Is there anyway I can combine this into one to make it a bit tidier?

Answer 1

You can make it tidier by chaining the two events together, then you can make use jQuery’s $(‘#id_selector’), and finally don’t bother to write to variable when you only need it once. Result:

$("#search_input").autocomplete({
    source: devices,
    select: function(e, i) {
        $('#searchresultdata').text(i.item.value);
    }
}).on("keyup change", function() {
    var search_input = $(this).val();
    if (search_input.length > 1 || search_input == '*') {
        $('#searchresultdata').text("Everything")
    }
    $('#searchresultdata').text(search_input);
});​