I use AutoComplete from jQuery UI

@using (Html.BeginForm()) { <div class="form-horizontal"> <h4>Введите аккаунт пользователя</h4> <div class="form-inline"> <input type="search" required class="form-control" name="request" id="request" /> <input type="submit" value="Найти" class="btn btn-default" /> </div> </div> } @Html.ActionLink("Назад","Services","Home") <script type="text/javascript"> onload = function () { $('#request').autocomplete({ source: '@Url.Action("Autocomplete")', minLength: 3, messages: { noResults: '', results: function () { } } }); } </script>

getting a strange effect

enter image description here

How to remove the inscription in the lower left corner? Duplicate selected option

  • No code example is indispensable - P. Ilyin
  • @ P.Ilyin script code? - Sergey Tambovtsev
  • yes yes yes yes yes yes - P. Ilyin
  • @ P.Ilyin corrected the question - Sergey Tambovtsev
  • and the layout of the page itself - Grundy

1 answer 1

Actually, the behavior of the plugin is rather strange.
The essence of the problem is that the plugin adds a span element with role="status" , in which it displays the current status, for example, the loading of elements, the selected element.

This element has the ui-helper-hidden-accessible class - for which the following properties are specified in the jquery-ui.css style file:

 .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Therefore, if this style is not connected, the message that is currently visible in this element will be displayed.

By the way, the elements added to the status do not disappear anywhere and are simply hidden with display:none . Thus, with prolonged use, you can find a mountain of markup with statuses.

Judging by the source, you can not disable this element. Perhaps it is worth looking in the direction of other plug-ins that implement autocomplete , for example in the same bootstrap .