Сокращённая форма выдачи автокомплита

231
04 ноября 2018, 11:10

господа! Прошу Вас помочь с решением моей проблемы, и так: есть очень длинное слово в автокомплите, как его можно обрезать и вместо оканчания вставить ...

Пример: сейчас -ActionScriptttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\111

Надо- ActionScriptttttt....\111.

Конкретнее, надо что бы в поле ввод полностью влазила сокращенная инфа из автокомплита.

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>jQuery UI Autocomplete - Default functionality</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <link rel="stylesheet" href="/resources/demos/style.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <script> 
  $( function() { 
    var availableTags = [ 
      "ActionScriptttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\111", 
      "AppleScript\222", 
      "Asp\333", 
      "BASIC\444", 
      "C\555", 
      "C++\666", 
      "Clojure\777", 
      "COBOL\888", 
      "ColdFusion\999", 
      "Erlang\10000", 
      "Scheme\111111" 
    ]; 
    $( "#tags" ).autocomplete({ 
      source: availableTags 
    }); 
  } ); 
  </script> 
</head> 
<body> 
  
<div class="ui-widget"> 
  <label for="tags" >Tags: </label> 
  <input id="tags" style="width:100px;"> 
</div> 
  
  
</body> 
</html>

Answer 1

Попробуйте text-overflow: ellipsis;

.ui-widget-content .ui-menu-item-wrapper { 
    max-width: 200px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}
<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>jQuery UI Autocomplete - Default functionality</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <link rel="stylesheet" href="/resources/demos/style.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <script> 
  $( function() { 
    var availableTags = [ 
      "ActionScriptttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\111", 
      "AppleScript\222", 
      "Asp\333", 
      "BASIC\444", 
      "C\555", 
      "C++\666", 
      "Clojure\777", 
      "COBOL\888", 
      "ColdFusion\999", 
      "Erlang\10000", 
      "Scheme\111111" 
    ]; 
    $( "#tags" ).autocomplete({ 
      source: availableTags 
    }); 
  } ); 
  </script> 
</head> 
<body> 
  
<div class="ui-widget"> 
  <label for="tags" >Tags: </label> 
  <input id="tags" style="width:100px;"> 
</div> 
  
  
</body> 
</html>

Answer 2

Думаю как вариант, попробуйте:

availableTags = $.map(availableTags, function(val, i) {
  return val.replace(val.substring(12, val.lenght), '...'); //после 12 позиции заменяем на ....
});
READ ALSO
Видимость переменной JS, AJAX, JQuery
jQuery

Видимость переменной JS, AJAX, JQuery

Обьясните пожалуйста почему переменная song в приведенном коде в функции alert равна undefined? При этом внутри блока success все окПравильно ли я понял,...

 189
Как проверить возвращаемый объект?
jQuery

Как проверить возвращаемый объект?

Есть такая функция:

 216
AJAX-запрос. Регистрация и авторизация
jQuery

AJAX-запрос. Регистрация и авторизация

При нажатии на submit (при регистрации) появится модальное окно с текстом об успехе и кнопочка перейти к заполнению профиля(в моем случае url такой...

 176
Удаление из обьекта JS
jQuery

Удаление из обьекта JS

Записывать получаеться , а удалить заставить не могу

 191