HTML输入框自动填充占位符

Question

当用户在文本框中输入时，展示给用户建议的最佳方法是什么？我有一个JS数组中的所有可能值。以数组["TYPO3", "Javascript"]为例。现在，如果用户输入此类字符串的起始字符，他应该得到如下建议： 我非常清楚html5标签placeholder，但这只适用于文本框为空的情况。我也知道Datalist元素或者jQuery自动完成，但这些只允许特定的值。我还想在我的文本框中使用未预定义的内容。

我的想法是在光标后面添加一个<span>标签，在输入键盘事件上更改其内容并将该标签移动到光标当前所在的位置。这也使我能够为建议文本设置样式。

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

- Elektropepi

Answer 1

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

• 为实际输入使用一个普通文本框 (<input type='text' ...>)。
• 一个被禁用的兄弟<input>元素。

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

这里有一个小示例：https://jsfiddle.net/e3L93o7g/

- Catalyst

---

我喜欢这个解决方案，所以我编辑了你的fiddle，使其成为一个可运行的示例：https://jsfiddle.net/fd822kab/1/。你可以将它添加到你的答案中，或者我会提供一个新的答案来包含这段代码。 - Elektropepi

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>

- Humoyun Ahmad