HTML input autofill placeholder

Question

What is the best approach to show the user suggestions when he writes into a textbox? I have all possible values in a JS array. Take as an example the array ["TYPO3", "Javascript"]. Now if the user enters the starting characters of such a string, he should get a suggestion like this:

I'm well aware of the placeholder html5 tag, but this would work only if the textbox is empty. I also know of the Datalist element or jQuery autocomplete but these only allow specific values. I also want content in my textbox that isn't predefined.

My idea would be to add a <span> tag right after the cursor, alter its content upon a input keyup event and move the span to the place where the cursor currently is. This would also make it possible for me to style the suggestion text.

But for me this seems to be a bad hack, so is there a cleaner solution for that?

Catalyst · Accepted Answer · 2017-06-18T13:49:20.393

6

I can't tell you what is the best approach, but if you trust Google's approach, then their solution is pretty simple:

Have a regular text box (<input type='text' ...>) for the actual input.
A sibling <input> element which is disabled.

The actual text box should be on top of the disabled one. When the user starts typing and you found a match for the autocomplete, the suggested text should become the value of the other disabled input element (the text of the suggestion should be in a silver color).

Here's a small example: https://jsfiddle.net/e3L93o7g/

edited Jun 18 '17 at 13:49

answered Jun 18 '17 at 13:42

Catalyst

1,018
2
12
19

1

I like this solution, so I edited your fiddle to a functioning example: https://jsfiddle.net/fd822kab/1/ You can add it to your answer or I'll provide a new answer with this code. – Elektropepi Jun 18 '17 at 14:59

Humoyun Ahmad · Answer 2 · 2019-06-26T23:11:01.787

This is what you want (I hope):

EDIT: Somehow it is NOT working here properly, so I put public jsfiddle as a backup :).

const names = [
 'Predator_1', 'Semantic_RL', 'Thorn', 'Kill_09', 'One', 'Preclude'
];

const container = document.querySelector('#autocomplete-container');
const autocomplete = container.querySelector('#autocomplete');
const mainInput = container.querySelector('#main-input');

mainInput.addEventListener('keyup', onKeyUp, false);

let foundName = '';

function onKeyUp(e) {
 // e.preventDefault();
 console.log( mainInput.value, e );
  console.log( autocomplete.textContent );
  
  if (mainInput.value === '') {
   autocomplete.textContent = '';
    return;
  }
  
  if  (keyChecker(e, 'Enter') || keyChecker(e, 'ArrowRight') ) {
   console.log('keyChecker')
  mainInput.value = foundName;
    autocomplete.textContent = '';
  }
  
  let found=false;
  
  for (let word of names) {
   if (word.indexOf(mainInput.value) === 0) {
     foundName = word;
     autocomplete.textContent = word;
      break;
    } else {
     foundName = '';
      autocomplete.textContent = '';
    }
  }
  
}

function keyChecker(e, key) {
 const keys = {
   'ArrowRight':37,
    'Enter':13,
    'ArrowLeft':39
  }
  
 if (e.keyCode === keys[key] || e.which === keys[key] || e.key === key) return true;
  
  return false;
}

div#autocomplete-container, input#main-input {
  font: 14px Tahoma, Verdana, Arial, sans-serif;
}

#autocomplete-container {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 32px;
  line-height: 32px;
  margin: 0 auto;
}

#autocomplete {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 8px;
  line-height: 32px;
  box-sizing: border-box;
  height: 32px;
  color: #999;
  cursor: text;
}

#autocomplete-container input[type=text] {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: none;
  padding: 0 8px;
  box-sizing: border-box;
  transition: 0.2s;
  background-color: transparent;
  cursor: text;
}

#autocomplete-container input[type=text]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

<div id="autocomplete-container">
  <div id="autocomplete"></div>
  <input
    id="main-input" 
    type="text"
    placeholder="Enter route..." /> 
</div>

HTML input autofill placeholder

2 Answers2