我制作了這個簡單的搜索片段。我讓它在我的陣列（元素陣列）中搜索，如果輸入值完全等于元素的名稱之一并且該元素將回傳。
所以在這里，如果我們在輸入欄位中搜索“apple”，下面的結果將回傳
{ 顏色：“紅色”，名稱：“蘋果”}
我的問題是：不根據輸入的確切值回傳，是否可以像輸入值一樣回傳值。例如，當我們鍵入 'ap' 之類的 'apple' 單詞的起始字母時，我希望回傳包含 'ap' 的 apple 物件和 apex 物件，而不是鍵入 'apple' 單詞（我想回傳所有物件它包含陣列中的“ap”之類的名稱），就像普通的搜索函式一樣。如果有人愿意幫助我，謝謝。下面是我的代碼。
//array
const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}];
//find function
const searchElement = (elementsArray,keyword) => {
const returnedElement = elementsArray.find((element,index) => {
return element.name.toLowerCase() === keyword.toLowerCase();
});
return returnedElement;
}
//keyup event
document.getElementById('myInput').addEventListener('keyup', () => {
const keyword = document.getElementById('myInput').value;
const result = searchElement(elements,keyword);
console.log(result);
});<input type="text" placeholder="Search" id="myInput">uj5u.com熱心網友回復：
我想這就是你想要的。使用過濾器代替它。
//array
const elements = [
{ name: "apple", color: "red" },
{ name: "apex", color: "white" },
{ name: "bat", color: "black" }
];
//find function
const searchElement = (elementsArray, keyword) => {
const returnedElement = elementsArray.filter((element, index) => {
return element.name.toLowerCase().includes(keyword.toLowerCase());
});
return returnedElement;
};
//keyup event
document.getElementById("myInput").addEventListener("input", () => {
const keyword = document.getElementById("myInput").value;
const result = searchElement(elements, keyword);
result.forEach((item) => console.log(item.name));
});<input type="text" placeholder="Search" id="myInput">uj5u.com熱心網友回復：
您可以使用 RegExp 運算式：
const searchElement = (elementsArray, keyword) => {
const returnedElement = elementsArray.find((element) => {
return element.name.toLowerCase().match(new RegExp('.*' keyword.toLowerCase() '.*','i')) !== null;
});
return returnedElement;
}
如果你使用 RegExp 運算式RegExp('.*' keyword.toLowerCase() '.*', 'i')，pp 將匹配 'apple'。如果您使用RegExp('^' keyword.toLowerCase() '.*', 'i')pp 將不會匹配 apple 但 app 會。
uj5u.com熱心網友回復：
你可以做：
const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}]
const myInput = document.getElementById('myInput')
myInput.addEventListener('keyup', () => {
const keyword = myInput.value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&')
const filterFn = ({ name }) => name.match(new RegExp(keyword, 'i'))
const result = elements.filter(filterFn)
console.clear()
console.log(result)
})<input type="text" placeholder="Search" id="myInput">uj5u.com熱心網友回復：
- 使用
"input"EventName （而不是"keyup"） - 因為輸入值不僅可以在某些鍵事件上更改，還可以在將值復制/粘貼到其中時更改，等等。“輸入”事件將處理所有這些情況。 - 在處理函式內部，不要再次查詢輸入元素的 DOM，只需使用Event.currentTarget如下：
evt.currentTarget.value - 創建一個可重用的函式，即
filter()接受四個引數：要搜索的陣列、要查找的屬性名稱（鍵）、要搜索的字串以及用于區分大小寫和匹配條件的可選物件（任何位置、完全匹配、開始或字串結尾） - 在Array.prototype.filter()中使用RegExp.prototype.test( )
/**
* @param {string} str String to escape
* @returns {string} String with escaped regex special characters
*/
const regEscape = (str) => str.replace(/[.* ?^${}()|[\]\\]/g, "\\$&");
/**
* @param {array} arr Array (of objects) to filter
* @param {string} key Property name
* @param {string} val Value to match
* @param {object} opt Options for case sensitive and match criteria
* @returns {array} Filtered array of objects
*/
const filter = (arr, prop, val, opt = {sensitive: false, match: "any"}) => {
val = regEscape(val);
const criteria = {
any: val,
start: `(?<=^| )${val}`,
end: `${val}(?=$| )`,
full: `(?<=^| )${val}(?=$| )`,
}[opt.match];
const reg = new RegExp(criteria, opt.sensitive ? "g" : "ig");
return arr.filter(ob => reg.test(ob[prop]));
};
// Task: Search objects by "name" property
// Data:
const data = [
{name: "apple", color: "red"},
{name: "apexx", color: "white"},
{name: "batle", color: "black"},
];
// Search input handler:
document.querySelector("#myInput").addEventListener("input", (evt) => {
const results = filter(data, "name", evt.currentTarget.value, { match: "start" });
console.clear()
console.log(results)
});<input id="myInput" type="text" placeholder="Search">正如您在上面看到的，{ match: "start" }使用了該選項 - 這將確保匹配應從字串的開頭開始。
如果您想從“任何”位置搜索，請使用{ match: "any" }或洗掉選項，因為默認情況下是“任何”。
要搜索區分大小寫，請使用：{ match: "start", sensitive: true }
PS：部分用到的邏輯取自：海力達
uj5u.com熱心網友回復：
根據您的問題，我認為我的解決方案可以幫助您
const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}];
//find function
const searchElement = (elementsArray,keyword) => {
var result = [];
elementsArray.forEach((element,index) => {
if (element.name.toLowerCase().includes(keyword.toLowerCase())) {
result.push(element);
}
});
return result;
}
//keyup event
document.getElementById('myInput').addEventListener('keyup', () => {
const keyword = document.getElementById('myInput').value;
const result = searchElement(elements,keyword);
console.log(result);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491217.html
標籤：javascript 数组 搜索