Autocomplete com Ajax no WebForms

Boa tarde, Estou desenvolvendo no meu WebForms a funcionalidade de autocomplete para o TextBox usando Ajax (código abaixo).

O problema é que junto com os dados retornados, aparece também a mensagem "3 results are available, use up and down arrow keys to navigate ". Não consigo desabilitar a mensagem. Testei no IE 11, Chrome, Edge (em todos aparecem a mensagem)

Estou usando os seguintes componentes na página ascx:1- ".../Content/themes/base/jquery-ui.css" rel="stylesheet"2- ".../JavaScript/json3.min.js">

3- ".../JavaScript/jquery-1.9.1.js">4- ".../JavaScript/jquery-ui-1.10.3.custom.js">

Abaixo a função Ajax:

$(function () { $('#<%=TextBox1.ClientID%>').autocomplete({ source: function (request, response) { $.ajax({ url: window.location.pathname + "/GetCliente", data: "{ 'prefixo': '" + request.term + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (result) { response($.map(result.d, function (item) { return { label: item.split('-')[0], val: item.split('-')[1] } })) }, error: function (result) { alert(result.responseText); } }); }, select: function (e, i) { $("[id$=hdnCliente]").val(i.item.val); }, minLength:1 }); });

Falta mais algum componente que eu preciso usar?

Obrigado André

Oi André, tudo bem?

A mensagem "3 results are available, use up and down arrow keys to navigate" é exibida pelo próprio plugin de autocomplete do jQuery UI e é uma mensagem padrão que aparece quando há mais de um resultado retornado pelo servidor.

Para remover essa mensagem, você pode definir a opção messages no objeto de configuração do plugin, como este:

$(function () {
  $('#<%=TextBox1.ClientID%>').autocomplete({
    source: function (request, response) {
      $.ajax({
        url: window.location.pathname + "/GetCliente",
        data: "{ 'prefixo': '" + request.term + "'}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (result) {
          response($.map(result.d, function (item) {
            return { label: item.split('-')[0], val: item.split('-')[1] }
          }))
        },
        error: function (result) {
          alert(result.responseText);
        }
      });
    },
    select: function (e, i) {
      $("[id$=hdnCliente]").val(i.item.val);
    },
    minLength: 1,
    messages: {
      noResults: '',
      results: function() {}
    }
  });
});

Observe que definimos as opções noResults e results no objeto messages como strings vazias, o que faz com que a mensagem padrão não seja exibida.

Espero ter ajudado.

Um abraço e bons estudos.

Mergulhe em programação