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.

Have a look at this: http://api.jqueryui.com/autocomplete/#event-response and then add/modify the response event in your code. — stackErr, Dec 01 '14 at 05:34
Check here `http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete` — Gowri, Dec 01 '14 at 05:36
@Gowri, I am getting this error `TypeError: ui.content is null:if (ui.content.length == 0)`. — Slimshadddyyy, Dec 01 '14 at 09:07

score 0 · Accepted Answer · answered Dec 01 '14 at 05:39

0

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

answered Dec 01 '14 at 05:39

stackErr

4,130
3
24
48

It says `TypeError: ui.content is null:if (ui.content.length == 0)`. Also how can I bind `no result found` in search dropdown ? – Slimshadddyyy Dec 01 '14 at 07:47
@Slimshadddyyy Here is a fiddle working with your example running: http://jsfiddle.net/sphn33ww/ Try and debug in the response event. See what `ui.content` is for different responses and then make your function respond to that. – stackErr Dec 01 '14 at 14:05
I tried with `if(ui.content.length === 0 || ui.content == null){` but it still shows me `TypeError: ui.content is null` error. – Slimshadddyyy Dec 02 '14 at 05:42
1

Well I changed the code to `response: function(event, ui){ if(ui.content == null){ jQuery('#empty-message').html("No Results Found").show(); } //else{ //console.log(ui.content); //jQuery('#empty-message').html(ui.content.length + " Result(s) Found"); //} }` and it worked. – Slimshadddyyy Dec 02 '14 at 06:15

jQuery UI Autcomplete Check Number of Results

1 Answers1