HTML 输入自动填充占位符

Posted 2023-04-18

【中文标题】HTML 输入自动填充占位符

【英文标题】：HTML input autofill placeholder

【发布时间】：2017-11-20 18:29:36

【问题描述】：

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

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

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

但对我来说，这似乎是一个糟糕的 hack，那么有没有更清洁的解决方案？

【参考方案1】：

我不能告诉你什么是最好的方法，但如果你相信谷歌的方法，那么他们的解决方案就很简单了：

有一个常规文本框 (<input type='text' ...>) 用于实际输入。 <input> 的兄弟元素disabled。

实际的文本框应该在禁用的文本框之上。 当用户开始输入并且您找到自动完成的匹配项时，建议的文本应成为另一个 disabled 输入元素的 value（建议的文本应为银色）。

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

【讨论】：

我喜欢这个解决方案，所以我将您的小提琴编辑为一个功能示例：jsfiddle.net/fd822kab/1 您可以将其添加到您的答案中，或者我将使用此代码提供一个新答案。

【参考方案2】：

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

编辑：不知何故，它在这里不能正常工作，所以我把 public 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>