14

В раскрывающемся меню появляется сообщение «Нет результатов», если результатов нет. Так, например, если я введу «ABCD» в текстовое поле, и нет сущности, которая соответствует, сообщение «Нет результатов». будет отображаться.jQuery UI autocomplete- нет результатов сообщение

После просмотра stackoverflow для различных способов выполнения этого и попыток некоторых из них, я все еще не могу заставить его работать.

Как добавить сообщение «Нет результатов» в раскрывающееся меню, когда результаты не найдены?

JQuery:

$element.autocomplete({ 
     source: function (request, response) {    
      $.ajax({ 
       url: thUrl + thQS, 
       type: "get", 
       dataType: "json", 
       cache: false, 
       data: { 
        featureClass: "P", 
        style: "full", 
        maxRows: 12 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         if (data.indexOf(item) === -1) { 
          return { label: "No Results." } 
         } else { 
          return { 
           label: item.Company + " (" + item.Symbol + ")", 
           value: item.Company 
          } 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: that.options.minLength, 
     select: function (event, ui) { 
       reRenderGrid(); 
     } 
    }); 

Я попытался добавить оператор, если() со следующим, но это не сработало.

if (data.length === 0) { 
    // Do logic for empty result. 
} 

Я могу переписать первую запись с текстом «Нет результата» если я следующий ...

if (data.indexOf(item) === 0) { 
    return { 
     label: "No Results." 
} 

... но если я не установлен data.indexOf(item) === -1 не отображается ничего.

Совсем недавно я попробовал следующее, и когда нет данных, он переходит в петлю, однако, «Нет результатов» не не отображается в меню:

success: function (data) { 
     response($.map(data, function (item) { 
      return { 
       label: item.Company + " (" + item.Symbol + ")", 
       value: item.Company 
      } 
     })); 
     if (data.length === 0) { 
      label: "No Results." 
     } 
    } 

Я также попытался использовать приведенный ниже пример Эндрю Уитакер не повезло:

АНДРЕЙ WHITACKER'S FIDDLE: http://jsfiddle.net/J5rVP/128/

ИСТОЧНИК: http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

ответ

14

Измените функцию так, чтобы проверить для длины данных.

success: function (data) { 
    if(!data.length){ 
     var result = [ 
     { 
     label: 'No matches found', 
     value: response.term 
     } 
    ]; 
     response(result); 
    } 
    else{ 
    // normal response 
     response($.map(data, function (item) { 
     return { 
      label: item.CompanyName + " (" + item.SymbolName + ")", 
      value: item.CompanyName 
     } 
     })); 
     } 
    } 
+0

Yep .. работал отлично! Благодаря! – Keven

20
 if (!ui.content.length) { 
      var noResult = { value:"",label:"No results found" }; 
      ui.content.push(noResult); 
      //$("#message").text("No results found"); 
     } 

Fiddle

http://jsfiddle.net/J5rVP/129/

Update

Поместите код в конце вашего автозаполнения настройки только после того, как select: function (event, ui) {..}

.......... 
    minLength: that.options.minLength, 
    select: function (event, ui) { 
      reRenderGrid(); 
    }, //HERE - make sure to add the comma after your select 
    response: function(event, ui) { 
     if (!ui.content.length) { 
      var noResult = { value:"",label:"No results found" }; 
      ui.content.push(noResult); 
     } 
    } 
}); 
+0

Спасибо за ответ Тревор. Я заметил, что вы редактировали скрипку Андрея Уайткера, однако его скрипка не совсем такая же, как у меня. Где бы я поставил ваш код выше? Где-то вокруг моего выбранного заявления? Можете ли вы создать скрипку, используя только мой код? – Keven

+0

@ Keven проверить мое обновление. – Trevor

+0

Эй, Тревор.Я попробовал, но это не сработало. Я не могу не думать, что это потому, что у меня уже есть ответ. Таким образом, если первый ответ в заявлении о успехе будет успешным, будет ли он также выполнять второй под оператором select? В моем случае это даже не доходило до утверждения. Я поставил точку останова и никогда не останавливался. – Keven

0

Для меня причина, почему произошло это сообщения были:

MISSING CSS FILES O JQUERY UI 

так что добавление:

<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" /> 

решена моя проблема

Смежные вопросы