Question

我正在我的React网站上进行搜索功能，当用户在搜索输入中输入关键字时，该关键字在json中匹配，如果在其中找到相同的关键字，则记录yes，否则什么也没有在控制台中登录。

这是我的JSON的样子：

[
  {
    "name": "iPhone 12 Space Black",
    "price": "1,12,322" ,
    "description": "",
    "rating": 4.8 ,
    "stock": "in stock",
    "image": "",
    "key": ["mobile", "iphone", "apple"]
  },
   {
    "name": "OnePlus 9",
    "price":"58,999",
    "description": "",
    "rating": 4.2,
    "stock": "out of stock",
    "image": "",
    "key": ["mobile", "one plus", "oneplus"]

  }, 
   {
    "name": "Google Pixel 5",
    "price": "78,654",
    "description": "",
    "rating": 3.4 ,
    "stock": "in stock",
    "image": "",
    "key": ["google", "mobile", "pixel", "google pixel"]
  }, 

//The rest of the JSON

]

因此，您可以看到它是一个对象数组，每个对象都有一个键（关键字）数组，如果键的任何成员与用户输入的值匹配，则应记录yes。

这是JSX

//React, css and all other imports
import {searchClick} from "../javascript/productSearch.js"


export default function Navbar() {
function onKeyPress() {
  var input = document.getElementById("search-input");
  
  input.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      document.getElementById("search-btn").click();
      event.preventDefault();
    }
  });
}

return(
<div>
//Some Code
         <div className="header-search-form">
              <input id="search-input" 
                     onKeyUp={onKeyPress()} 
                     type="text" 
                     placeholder="Enter a keword to search...." />
              <button id="search-btn" onClick={searchClick}>
                   <img src={searchIcon} width="25px" /> 
              </button>
        </div>
//Some code
</div>

)}

当用户单击搜索输入中的搜索图标或按Enter键时，JavaScript运行，这是JS：

export function searchClick() {
    console.log("fun working");
    var searchQuery = document.querySelector("#search-input").value;
    console.log(searchQuery);

    if(searchQuery === "")
    console.log("null");
    else extarctJSON()

     function extarctJSON() {
        fetch("./json/products.json")
        .then(res => res.json())
        .then(data => {

        console.log(data);
        
        var len = data.length;
        
        for(var i=0;i<len;i++) {
            var keyLen = data[i].key.length;
            for(var j=0;j<keyLen;j++) {
                if(data[i].key[j] === searchQuery) {
                    console.log("yes");
                    break;
                } 
            }
        }
    })  
    }
  
    }

因此，循环检查JSON数组中的所有对象，并在每个对象中搜索键数组中的searchQuery，如果发现循环中断并记录yes，则遵循相同的过程JSON数组中其余的对象。

我希望我解释了我想做的事情，现在这是我所遇到的问题：

问题当用户单击#search-btn图像时，他获得所需的输出，对于移动设备，他将获得3是，但是当他按Enter而不是单击#search-btn时，他获得了多次，是，超过与关键字匹配的实际对象。

我一直在试图解决这个问题，但是似乎没有任何效果，我也没有任何线索可以弄清楚我实际上错了。

这是Netlify上的LIVE网站这是完整的JSON，因此您可以尝试在其中使用其他关键字pastebin

希望我能找到解决该问题的方法，谢谢。

Answer 1

只需更新少量JavaScript：

function onKeyPress() {
  var input = document.getElementById("search-input");
  
  input.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
      document.getElementById("search-btn").click();
      //Add this line
      event.stopImmediatePropagation();
    }
  });
}

event.stopImmediatePropagation();停止该事件的所有其他侦听器。

Answer 2

在onKeyUp中，您只需要处理Enter键。

import networkx as nx
prepath = lambda x: x if not "\\" in x else "\\".join(x.split("\\")[:-1])
df = df.assign(prepath = df["complete_path"].apply(prepath))
df["source_ID"] = df["prepath"].map(df.set_index("complete_path")["ID"])
g = nx.from_pandas_edgelist(df, source="source_ID", target="ID", create_using=nx.MultiDiGraph)
df["dependency"] = [nx.ancestors(g,i) or None for i in df["ID"]]
print(df[["ID","complete_path","dependency"]])
   ID complete_path dependency
0   1          Ajax       None
1   2    Ajax\991\1     {1, 3}
2   3      Ajax\991        {1}
3   4           BVB       None
4   5   BVB\Christy        {4}
5   6   BVB_Christy       None

onKeyPress = (event) => {
  if(event.key === 'Enter'){
    searchClick();
  }
}

从JSON提取的数据在按Enter键

2 个答案: