在 Jquery 自动完成中滚动文本

Question

I found the following fiddle which prevents any word wrap in autocomplete suggestions and only displays them in one line:

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>

Is there any way to animate the autocomplete suggestions that overflow the max-width and to make them autoscroll from left to right on mouse hover? Please see the following snippet with the example of the autoscroll on hover animation I would like to implement:

 .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

Try it like this

 $("#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>