How to disable click when autocomplete Field "no rseult found" via ajax call

Question

I have done almost everything and I have successfully implemented autocomplete searching with ajax. Now problem is that when no data is found in autocomplete searching by default it shows No Result found. When I click on "NO Results Found" it is appearing on textbox. I want when No Results Found and user tries to click on that it should be no clickable

Here is My jquery Code:

src = "{{ route('searchajax') }}";
$("#search_text").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term : request.term
            },
            success: function(data) {
                response(data);
            }
        });
    },
    min_length: 3,
});

And My laravel 5.2 function

public function autoComplete(Request $request) {
    $query = $request->get('term','');

    $states=DB::table('states')->where('state','LIKE','%'.$query.'%')->get();

    $data=array();
    foreach ($states as $state) {
            $data[]=array('value'=>$state->state,'id'=>$state->id);
    }
    if(count($data))
         return $data;
    else
        return ['value'=>'No Result Found','id'=>''];
}

What happens if you console.log `data` in your success function? You should be able to make a simple condition when id is empty. — Marc Bellêtre, Apr 15 '17 at 10:21
yes we can check with id if is empty but how to disable the click on when user try to click on "No Result Found" — kunal, Apr 15 '17 at 10:27
It looks like you're doing it the wrong way. You should just check if `data` is empty and then display "No results found" in a custom div which is not clickable. Which means your PHP function should return an empty array instead of a "No results found" value — Marc Bellêtre, Apr 15 '17 at 10:34

score 1 · Accepted Answer · edited May 23 '17 at 12:25

This is the answer you are looking for

You can use the response function to check if you do have results. If not, just push "No results found" to your list and then use _renderItem to disable this option.

$("#search_text").autocomplete({
    source: function(request, response) {
    $.ajax({
        url: src,
      dataType: "json",
      data: {
        term : request.term
      },
      success: function(data) {
        response(data);
      }
    });
  },
  min_length: 3,
  response: function(event, ui) {
    if( ui.content.length === 0 ) {
      ui.content.push({
        'label': 'No results found',
        'value': ''
      });
    }
}).data("ui-autocomplete")._renderItem = function(ul, item) {
  if( item.value == '' ) {
    return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
  } else {
    return $("<li>").append("<a>" + item.label + "</a>").appendTo(ul);
  }
};

I made this fiddle so you can see it working.

How to disable click when autocomplete Field "no rseult found" via ajax call

1 Answers1