基于字符串任意字母的搜索建议

Question

我正在尝试编写一些基于预审字符串的自动建议的java脚本代码

这是我的意思的一个例子：

如果我们有字符串数组=> [ 'text' , 'apple' , 'texas' , 'time' , 'java' , 'java script' , 'pen' ]

我想要实现的是： 当用户输入 ==> "te" 时，函数应该返回 ==> 'text' 和 'texas'

但是

如果用户输入==>“t*e”OR“t e”，函数之间有空格应返回此值 ==> 'text' 、 'texas' 、 AND 'time' 因为它包含两个字母，无论顺序如何

如果用户输入 ==> "p*e" OR "p e" 则结果应该是 ==> 'apple' 和 'pen' 因为展位包含字母“p”和“e”

这是我到目前为止所做的事情

const nameInput = document.getElementById('name')

const names = [ 'text' , 'apple' , 'texas' , 'time' , 'java' , 'java script' , 'pen' ]

nameInput.addEventListener('keyup', ()=> {
  // console.log(nameInput.value)
const text = nameInput.value.trim().replace(/\s/g, '')
// console.log(text)
const a = names.filter(name => name.includes(text))
console.log(a)
})

<input type="text" placeholder="search"  id="name">

Answer 1

根据您的帖子，

t*e

失败了，因为您没有在正则表达式中赶上它们。更可靠的方法是替换所有字母数字字符。您可以通过将正则表达式稍微更改为

/[\W_]+/g

来快速完成此操作

 const text = nameInput.value.trim().replace(/[\W_]+/g, '')

下面的工作代码

const nameInput = document.getElementById('name')

const names = ['text', 'apple', 'texas', 'time', 'java', 'java script', 'pen']

nameInput.addEventListener('keyup', () => {
  // console.log(nameInput.value)
  const text = nameInput.value.trim().replace(/[\W_]+/g, '')
  // console.log(text)
  const a = names.filter(name => name.includes(text))
  console.log(a)
})

<input type="text" placeholder="search" id="name">

Answer 2

products1 是数组数据。

 var tags = [];
    if (products1) {
        products1.map((product) => {
            tags.push(product.name)
        })
    }

 /*list of available options*/
    var n = tags.length; //length of datalist tags

    function ac(value) {
        if (value.length) {
            document.getElementById('datalist').innerHTML = '';
            //setting datalist empty at the start of function
            //if we skip this step, same name will be repeated

            let l = value.length;
            //input query length

            for (var i = 0; i < n; i++) {
                if (((tags[i].toLowerCase()).indexOf(value.toLowerCase())) > -1) {
                    //comparing if input string is existing in tags[i] string

                    var node = document.createElement("option");
                    var val = document.createTextNode(tags[i]);
                    node.appendChild(val);

                    document.getElementById("datalist").appendChild(node);
                    //creating and appending new elements in data list
                }
            }
        }

    }


     <div className="input-group">
            <input
                type="text"
                id="search_field"
                className="form-control"
                spellcheck="true"
                autocomplete="off"
                placeholder="Enter Product Name"
                value={keyword}
                onChange={(e) => (e.target.value)}
                list="datalist" onKeyPress={ac(keyword)}
            />
            <datalist id="datalist">
                {products1 && products1.map((product) => {
                    <option value={`"${product.name}"`}></option>
                })}

            </datalist>
            <div className="input-group-append">
                <button id="search_btn" className="btn">
                    <i className="fa fa-search" aria-hidden="true"></i>
                </button>
            </div>
        </div>