Ajax call with Spring MVC Controller
I think you just can get rid of getAll() function as it is just a special case of searchID().

 function searchID() {
     var id = document.getElementById("search").value;
     $("#customers").html("");

     $.getJSON("http://localhost:8080/customer/" + id,  
       function(data) {
                 ([].concat(data)).forEach(function(customer) {
                     $('#customers').append("&lt;p&gt;ID: " + customer.userId + "&lt;/p&gt;");
                     $('#customers').append("&lt;p&gt;First name: " + customer.fName + "&lt;/p&gt;");
                     $('#customers').append("&lt;p&gt;Last name: " + customer.lName + "&lt;/p&gt;&lt;br&gt;");
                 });   
       });
  }


If the id value is empty then the results it's exactly the same as getAll().

Another important thing to change is the url, if your server is the same, you can just remove the initial part:

$.getJSON("/customer/"...);


This helps to avoid bugs in the future or need of refactoring if you just simply add https.

Cache the jQuery search to avoid the repeat:

 function searchID() {
     var $customers = $("#customers");
     var id = document.getElementById("search").value;
     $customers.html("");

     $.getJSON("http://localhost:8080/customer/" + id,  
       function(data) {
                 ([].concat(data)).forEach(function(customer) {
                     $customers.append("&lt;p&gt;ID: " + customer.userId + "&lt;/p&gt;");
                     $customers.append("&lt;p&gt;First name: " + customer.fName + "&lt;/p&gt;");
                     $customers.append("&lt;p&gt;Last name: " + customer.lName + "&lt;/p&gt;&lt;br&gt;");
                 });   
       });
  }


Here is an example inside the searchID() function, if you use in all the module, you should save as a module variable.

Another thing is that is not responsability of searchID() to know how to get the id:

 function searchID(id) {
     var $customers = $("#customers");
     $customers.html("");

     $.getJSON("http://localhost:8080/customer/" + id,  
       function(data) {
                 ([].concat(data)).forEach(function(customer) {
                     $customers.append("&lt;p&gt;ID: " + customer.userId + "&lt;/p&gt;");
                     $customers.append("&lt;p&gt;First name: " + customer.fName + "&lt;/p&gt;");
                     $customers.append("&lt;p&gt;Last name: " + customer.lName + "&lt;/p&gt;&lt;br&gt;");
                 });   
       });
  }


Instead you should add a new function:

function performSearch() {
    var id = document.getElementById("search").value;
    searchID(id);
}


And the same for the draw of the customers on the page:

function displayCustomers($el, customers) {
    $el.html("");

    customers.forEach(function(customer) {
           $el.append("&lt;p&gt;ID: " + customer.userId + "&lt;/p&gt;");
           $el.append("&lt;p&gt;First name: " + customer.fName + "&lt;/p&gt;");
           $el.append("&lt;p&gt;Last name: " + customer.lName + "&lt;/p&gt;&lt;br&gt;");
    });
}


And then:

function performSearch() {
    var id = document.getElementById("search").value;
    searchID(id, function(customersToDisplay) {
        displayCustomers($("#customers"), customersToDisplay);
    });
}


And the new searchID():

 function searchID(id, callback) {
     $.getJSON("/customer/" + id,  
       function(data) {
           callback(([].concat(data));
       });
  }


In this way you separate the different aspects:


handle the dom event and launch a command accordingly;
perform an ajax request and handle the harmonization of the response.
use a callback to handle the ajax response
update the DOM