HTML输入自动填充占位符

Question

在写入文本框时显示用户建议的最佳方法是什么？我在JS数组中有所有可能的值。以数组["TYPO3", "Javascript"]为例。现在，如果用户输入这样一个字符串的起始字符，他应该得到如下建议：

我很清楚placeholder html5标记，但只有在文本框为空时才会有效。我也知道Datalist element或jQuery autocomplete，但这些只允许特定值。我还希望文本框中的内容不是预定义的。

我的想法是在光标后面添加一个<span>标记，在输入keyup事件上更改其内容并将范围移动到光标当前所在的位置。这也使我可以设置建议文本的样式。

但对我而言，这似乎是一个糟糕的黑客，那么有更清洁的解决方案吗？

Answer 1

我无法告诉您什么是最佳方法，但如果您信任Google的方法，那么他们的解决方案非常简单：

• 为实际输入设置常规文本框（<input type='text' ...>）。
• 同级<input>元素disabled。

实际文本框应位于已禁用的文本框之上。 当用户开始输入并找到自动填充的匹配项时，建议的文本应该成为另一个value输入元素的disabled（建议的文本应该是银色）。< / p>

以下是一个小例子：https://jsfiddle.net/e3L93o7g/

Answer 2

这就是您想要的（我希望）：

编辑：某种程度上它在这里无法正常工作，因此我将公用jsfiddle用作备份：）。

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>