如何在自动完成时禁用点击字段＆＃34;没有发现＆＃34;通过ajax电话

Question

我已经做了几乎所有事情，并且我已成功使用ajax实现自动完成搜索。现在的问题是，当默认情况下在自动完成搜索中找不到数据时，它会显示未找到结果。当我点击＆＃34;没有找到结果＆＃34;它出现在文本框中。我希望当找不到结果并且用户试图点击它时，它应该是无法点击的

这是我的jquery代码：

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'=>''];
}

我的laravel 5.2功能

useUnicode=true&characterEncoding=utf-8

Answer 1

This是您正在寻找的答案

您可以使用response功能检查是否有结果。如果没有，只需将“未找到结果”推送到列表中，然后使用_renderItem禁用此选项。

$("#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);
  }
};

我做了this fiddle所以你可以看到它正常工作。