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

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>