JQuery Autocomplete

Question

I've got a problem with my jQuery autocomplete field. Its some kind of strange.

This is my autocomplete field and script. The response from my mvc function works fine. The Dropdownlist is visible entries. But when I'm trying to select an item the resultlist simply disappears. Does anyone have an idea?

 <div class="ui-widget">
    <input id="newPlayerName" type="text" name="newPlayerName" onkeyup="checkRegistration()" />
 </div>

code:

<script type="text/javascript">
  $(function () {
      $('#newPlayerName').autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: '/Trainer/Search',
                  data: {
                      searchTerm: request.term
                  },
                  dataType: 'json',
                  type: 'POST',
                  minLength: 1,

                  success: function (data) {
                      response(data);
                  }
              });
          },
          select: function (event, ui) {
              checkRegistration(ui.item.value);
          },
          focus: function (event, ui) {
              event.preventDefault();
              $("#newPlayerName").val(ui.item.label);
          }
      });
  });
</script>

Ah ... this are the jquery scripts I'm using...

<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>

Answer 1

$(function () {
  var getData = function (request, response) {
    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "Default.aspx/GetMultiProductList",
      data: "{'term':'" + $("#txtAutoCompleteMulti").val() + "'}",
      dataType: "json",
      success: function (data) {
        response($.map(data.d, function (item) {
          if (item != null)
            return { label: item.label, title: item.value }//value: item.label,
            }))
      },
      error: function (result) {
        alert("Error");
      }
    });
  };
  var selectItem = function (event, ui) { $("#txtAutoCompleteMulti").val(ui.item.value); return false; }
  $("#txtAutoCompleteMulti").autocomplete({
    source: getData,
    select: selectItem,
    _resizeMenu: function () {
      this.menu.element.outerWidth(500);
    },
    search: function (event, ui) { },
    minLength: 1,
    change: function (event, ui) {
      if (!ui.item) {
        $('#txtAutoCompleteMulti').val("")
      }
    },
    select: function (event, ui) {
      $("#txtAutoCompleteMulti").prop('title', ui.item.title)
    },
    autoFocus: true,
    delay: 500
  });
});

 .ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .ui-autocomplete-loading {
            background: url('img/Progress_indicator.gif') no-repeat right center;
        }
        .seachbox {
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 250px;
            padding: 6px 25px 6px 6px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<div>
   <table style="width: 100%;">
     <tr>
       <td style="width: 20%">Product Name :</td>
       <td>
         <input type="text" id="txtAutoCompleteMulti" placeholder="Seach Product" class="seachbox" />
       </td>
     </tr>
  </table>
</div>

c# code using webmethod

Answer 2

One thing that seems wrong with the code you have shown is the fact that you have included the jquery-ui script twice (the minified and standard versions). You should have only one:

<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>