不仅在开始时自动完成文本中间答案

【问题标题】：Autocomplete middle of the text not only on start不仅在开始时自动完成文本中间
【发布时间】：2020-03-20 20:48:41
【问题描述】：

有没有办法在文本中间实现自定义自动完成列表，而不仅仅是从头开始？

可以说，我有一个像这样的自定义自动完成列表。

['@Martin','@Josu','@Mikenko','@Buarandun','@Ravindran','Basix','#ItemNr']

当我在输入中输入以下内容时，'Hallo @M'，它应该列出['@Martin' ,'@Mikenko']

https://www.w3schools.com/howto/howto_js_autocomplete.asp

谢谢。

【问题讨论】：

检查这个：drop down autocomplete
它不在文本中间，仅在开始。
对不起，我的错。请检查我的答案。

标签： javascript

【解决方案1】：

const searchInput = document.getElementById("search");
const output = document.getElementById("output");
const names = [
  "@Martin",
  "@Josu",
  "@Mikenko",
  "@Buarandun",
  "@Ravindran",
  "Basix",
  "#ItemNr"
];
searchInput.addEventListener("input", matchNames);

function matchNames(e) {
  const { value } = e.target;
  output.innerHTML = ""
  // start matching if '@' symbol found
  if (value.includes("@")) {
    const symbolIndex = value.indexOf("@"); // get the symbol index
    const matchValue = value.substring(symbolIndex); // start matching from symbol index
    const matchList = names.filter(
      name => name.toLowerCase().indexOf(matchValue.toLowerCase()) !== -1
    );
    // output
    const html = matchList.map(name => {
      const Name = name
        .toLowerCase()
        .replace(matchValue, `<strong>${matchValue}</strong>`)
      return `<span class="name">${Name}</span>`
    }).join("")
    // push data into output
    output.innerHTML = html
  }
}

.name {
  display: block
}

<input id="search" type="text" class="form-control" placeholder="names">
<div id="output"></div>

【讨论】：

【解决方案2】：

这部分

inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;

转换成

inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
val = val.split(' ').reverse()[0];   // Get last

这应该永远是最后一个字

【讨论】：

【解决方案3】：

您可以根据要开始自动完成的字符长度应用条件。例如你可以说

if(yourInput.length > 3 ) {
  //your rest autocomplete thing here
}

【讨论】：

【解决方案4】：

您可以使用search() 方法。阅读它here。

跟随变化

if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

到

if (val.toUpperCase().search(arr[i].toUpperCase()) != -1) {

未测试，希望对您有所帮助:)

【讨论】：

【解决方案5】：

你只需要改变

var a, b, i, val = this.value.split("@");
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val || val.length < 2) { return false;}
val = val[val.length-1]

然后

if(arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase())

到

if(arr[i].toLowerCase().indexOf(val.toLowerCase()) !== -1)

并更改显示列表来自

b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);

到

b.innerHTML = arr[i].toLowerCase().replace(val.toLowerCase(), '<b>' + val.toLowerCase() + '</b>');
b.style.textTransform = "capitalize";

当您在文本中输入“@”时，它将开始显示自动完成。

例如codepen

【讨论】：

对不起，我的问题不够详细。当我：“Hello Colom”时，它应该列出哥伦比亚。现在不匹配了。
在这种情况下，您需要提及文本的哪一部分需要开始自动完成。否则每次你开始写作时它都会显示自动完成列表。我刚刚更改了codepen。请看一看。
对codepen 的另一个简单更改。现在你只需写“@”，它就会开始在你想要的地方显示自动完成，就像任何其他 IM（Skype、Messenger 等）一样