在 Jquery 自動完成中滾動文本

Question

我發現以下小提琴可以防止自動完成建議中的任何自動換行，並且只將它們顯示在一行中：

http://jsfiddle.net/DwpZp/8/

 $("#ac").autocomplete({ source: [ "someveryve rylonglongword", "someveryverylong longwordsomeveryverylonglongword" ] });

 .ui-menu-item a { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> <div> <input type="text" id="ac" /> </div>

有什么方法可以使溢出最大寬度的自動完成建議動畫化，並使它們在鼠標 hover 上從左向右自動滾動？ 請參閱以下代碼段，其中包含我想實現的 hover animation 上的自動滾動示例：

 .labelContainer { height: 30px; border: 1px solid #000; border-radius: 3px; border-radius: 3px; display: flex; width: 200px; overflow: hidden; position: relative; padding: 5px; }.labelContainer span { position: absolute; white-space: nowrap; transform: translateX(0); transition: 1s; }.labelContainer:first-of-type:hover span { width: auto; transform: translateX(calc(200px - 100%)); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="labelContainer"> <span>The long text should scroll when user hovers on it.</span> </div> <div class="labelContainer"> <span>Should Not Scroll</span> </div>

Answer 1

像這樣試試

 $("#ac").autocomplete({ source: [ "someveryve rylonglongword", "someveryverylong longwordsomeveryverylonglongword" ] });

 .ui-menu-item { overflow: hidden; position: relative; display: flex; max-width: 200px; white-space: nowrap; }.ui-menu-item a { white-space: nowrap; position: relative; transform: translateX(0); transition: transform 1s; box-sizing: border-box; }.ui-menu-item:hover a { width: auto; transform: translateX(calc(200px - 100%)); }.ui-widget-content a.ui-state-focus { margin: -1px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> <div> <input type="text" id="ac" /> </div>