Is there a way to create a textbox input that provides autocomplete/autosuggest but displays only the first match directly within the textbox instead of showing a list?

Question

Is there a way to create a textbox input that provides autocomplete/autosuggest but displays only the first match directly within the textbox instead of showing a list?

While I came across several autocomplete/autosuggest samples, none of them quite fit what I'm looking for. Instead of displaying a list below the textbox that requires clicking or selecting, I want to show the closest match inside the textbox itself as the user is typing. This way, they can easily tab or use another method to complete the entry.

I believe I have the logic in Javascript (using Vue JS) figured out, but I am struggling with how to actually display this suggestion inside the input. I envision the suggested text being slightly dimmer in color, similar to placeholder text, and getting overwritten as the user continues typing.

Does anyone have any suggestions on how to achieve this?

javascript vue.js

Answer 1

Answer №1

To position it securely, you can utilize absolute positioning with a low z-index.

<div class="container">
      <input v-model="value" @keyup.prevent="autofill"></input>
      <div class="suggested">
      {{suggested}}
      </div>
</div>

input {
  border: 4px solid #e3e3e3;
  padding:10px;
  width:100%;
}
.container {
  width:50%;
  margin: auto;
  position:relative;
}
.suggested {
  position:absolute;
  top:25px;
  left:25px;
  color:#e3e3e3;
  z-index:-1;
}

Here's a live demo for reference: https://codepen.io/ellisdod/pen/mdJayxo

Answer 2

To position it securely, you can utilize absolute positioning with a low z-index.

<div class="container">
      <input v-model="value" @keyup.prevent="autofill"></input>
      <div class="suggested">
      {{suggested}}
      </div>
</div>

input {
  border: 4px solid #e3e3e3;
  padding:10px;
  width:100%;
}
.container {
  width:50%;
  margin: auto;
  position:relative;
}
.suggested {
  position:absolute;
  top:25px;
  left:25px;
  color:#e3e3e3;
  z-index:-1;
}

Here's a live demo for reference: https://codepen.io/ellisdod/pen/mdJayxo

Is there a way to create a textbox input that provides autocomplete/autosuggest but displays only the first match directly within the textbox instead of showing a list?

Answer №1

Similar questions

"Navigate with ease using Material-UI's BottomNavigationItem and link

Laravel websocket notification causes Vue.js component to stop updating

Utilizing a debugger to set a stopping point within a Vue application

Having trouble with my routes in Express Router - the page just won't load!

What is the best way to use jQuery to update the color of an SVG shape?

Create a roster of numbers that are multiples using a systematic approach

Nodemailer contact form malfunctioning

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

What is the syntax for implementing a nested for loop in JavaScript within this particular scenario?

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

What drawbacks should be considered when utilizing meteor.js for development?

Using Leaflet JS to add custom external controls to your map

The presence of Firefox Marionette has been identified by hCaptcha

Vue.js and Firestore will only update variables that do not have empty string values

Vue.js App encounters Recaptcha contact form 7 with a status of "spam"

Implementing a dual hover effect on a Div element

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

Guide on how to automatically log out a user at a designated time

Trouble with the onload function in onMounted vue3

Determine the exact width of text without rounding in Javascript