CODEWITHSUNDEEP
javascripthtmljquerycssautocomplete
Michael
Michael

Reputation: 61

Scroll Text in Jquery Autocomplete

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>

Upvotes: 0

Views: 422

Answers (1)

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 1

Related Questions