jQuery UI Autcomplete Check Number of Results

Question

JS Script:

<script>
/* This function is used for multiple autocomplete input values */
 $(function () {

     var oldID = jQuery("#old_project_manager_id").val();
     if (oldID != null) {
         jQuery("#project_manager_id").val(oldID);
     }

     function split(val) {
         return val.split(/,\s*/);
     }

     function extractLast(term) {
         return split(term).pop();
     }
     $("#project_manager")
     // don't navigate away from the field on tab when selecting an item
     .bind("keydown", function (event) {
         if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
             event.preventDefault();
         }
     })
         .autocomplete({
         source: function (request, response) {
             $.getJSON("<?php echo SITE_URL.'project/pmlist'?>", {
                 term: extractLast(request.term)
             }, response);
         },
         search: function () {
             // custom minLength
             var term = extractLast(this.value);
         },
         focus: function () {
             // prevent value inserted on focus
             return false;
         },
         select: function (event, ui) {
             var terms = split(this.value);
         }
     })
 }
</script>

And also this:

$(function () {

    var oldID = jQuery("#old_user_id").val();
    if (oldID != null) {
        jQuery("#user_id").val(oldID);
    }

    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }
    $("#user")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
            event.preventDefault();
        }
    })
        .autocomplete({
        source: function (request, response) {
            $.getJSON("<?php echo SITE_URL.'somecontroller/someaction'?>", {
                term: extractLast(request.term)
            }, response);
        },
        search: function () {
            // custom minLength
            var term = extractLast(this.value);
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);

            // remove the current input
            terms.pop();

            // add the selected item
            terms.push(ui.item.value);
            this.value = terms.join(", ");

            jQuery("#user_id").val(ui.item.emp_id);

            return false;
        }
    });
});

I have tried with .length() for searched term, but its not fetching correct result.

When user types something, this will display list of registered user. How can I show No Result Found message based on the number of records fetched. If there are no valid users, it will show the message else it will show the user list.

Thanks.

Answer 1

I would add something like this:

$("#user")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
            event.preventDefault();
        }
    })
        .autocomplete({
        //Your code here
            response: function(event, ui) {
                if(ui.content.length == 0)
                {
                    //do what you want if no results returned
                }
            }
    });

Reading the documentation for jQuery UI helps: http://api.jqueryui.com/autocomplete/#event-response