如何使用我的搜索栏具有两个不同的值？

huangapple
go评论117阅读模式
英文:

How can I use my searchbar with two different values?

问题

I've tried to add another value (organization.name) to my already successfully working searchbar, so that not only the list of SearchTerms from my organization.topic were filtered. But he doesnt add it..

  1. const filteredOrganizations = context.allOrganizations.filter((organization) => (organization.topic.searchTerms
  2.     .map((term) => term.toLowerCase())
  3.     .join(" ") ||
  4.     organization.name)
  5.     .includes(searchText.toLowerCase()))

thats the relevant part of my return:

  1. <TableBody>
  2.     {filteredOrganizations.map((organization) => (
  4.         <StyledTableRow key={organization.id}>
  5. ...
英文:

I've tried to add another value (organization.name) to my already successfully working searchbar, so that not only the list of SearchTerms from my organization.topic were filtered. But he doesnt add it..

  1.     const filteredOrganizations = context.allOrganizations.filter((organization) =&gt; (organization.topic.searchTerms
  2.         .map((term) =&gt; term.toLowerCase())
  3.         .join(&quot; &quot;) ||
  4.         organization.name)
  5.         .includes(searchText.toLowerCase()))

thats the relevant part of my return:

  1. &lt;TableBody&gt;
  2.                             {filteredOrganizations.map((organization) =&gt; (
  4.                                 &lt;StyledTableRow key={organization.id}&gt;
  5. ...

I hope you have an idea

答案1

得分: 0

不要使用 ||，因为您还想检查组织名称。
只需将字符串连接起来

  1. const filteredOrganizations = context.allOrganizations.filter(organization => 
  2. (
  3.   organization.topic.searchTerms
  4.     .map(term => term.toLowerCase()).join(' ') 
  5.     + ' ' + organization.name
  6. )
  7. .includes(searchText.toLowerCase()))
英文:

Don't use || since you want to check also the organization name.
Just concatenate the strings

  1. const filteredOrganizations = context.allOrganizations.filter(organization =&gt; 
  2. (
  3.   organization.topic.searchTerms
  4.     .map(term =&gt; term.toLowerCase()).join(&#39; &#39;)
  5.     + &#39; &#39; + organization.name
  6. )
  7. .includes(searchText.toLowerCase()))

答案2

得分: 0

以下是您要翻译的代码部分：

  1. const searchText = 'term5'; // 用户输入
  3. // 虚拟数据
  4. const context = {
  5.   allOrganizations: [
  6.     {
  7.       name: 'Organization 1',
  8.       topic: {
  9.         searchTerms: ['term1', 'term2'],
  10.       },
  11.     },
  12.     {
  13.       name: 'Organization 2',
  14.       topic: {
  15.         searchTerms: ['term5', 'term6'],
  16.       },
  17.     },
  18.     {
  19.       name: 'Organization 3',
  20.       topic: {
  21.         searchTerms: ['term7', 'term8'],
  22.       },
  23.     },
  24.   ],
  25. };
  27. // 过滤组织
  28. const filteredOrganizations = context.allOrganizations.filter((organization) =>
  29.   (
  30.     organization.topic.searchTerms
  31.       // 去除空格并转换为小写
  32.       .map((term) => term.trim().toLowerCase())
  33.       // 将术语连接成单个字符串
  34.       .join(' ') +
  35.     // 添加组织名称
  36.     ' ' +
  37.     organization.name
  38.   )
  39.     .toLowerCase()
  41.     // 检查搜索文本是否包含在字符串中
  42.     .includes(searchText.trim().toLowerCase())
  43. );
  45. console.log(filteredOrganizations);

希望这可以帮助您。

英文: 
  1. const searchText = &#39;term5&#39;; // user input
  3. // dummy data
  4. const context = {
  5.   allOrganizations: [
  6.     {
  7.       name: &#39;Organization 1&#39;,
  8.       topic: {
  9.         searchTerms: [&#39;term1&#39;, &#39;term2&#39;],
  10.       },
  11.     },
  12.     {
  13.       name: &#39;Organization 2&#39;,
  14.       topic: {
  15.         searchTerms: [&#39;term5&#39;, &#39;term6&#39;],
  16.       },
  17.     },
  18.     {
  19.       name: &#39;Organization 3&#39;,
  20.       topic: {
  21.         searchTerms: [&#39;term7&#39;, &#39;term8&#39;],
  22.       },
  23.     },
  24.   ],
  25. };
  27. // filter organizations
  28. const filteredOrganizations = context.allOrganizations.filter((organization) =&gt;
  29.   (
  30.     organization.topic.searchTerms
  31.       // remove whitespace and convert to lowercase
  32.       .map((term) =&gt; term.trim().toLowerCase())
  33.       // join terms into a single string
  34.       .join(&#39; &#39;) +
  35.     // add organization name
  36.     &#39; &#39; +
  37.     organization.name
  38.   )
  39.     .toLowerCase()
  41.     // check if search text is included in the string
  42.     .includes(searchText.trim().toLowerCase())
  43. );
  45. console.log(filteredOrganizations);

答案3

得分: 0

这是解决方案：

  1. const filteredOrganizations = context.allOrganizations.filter(organization => {
  2.     const searchTerms = organization.topic.searchTerms.map(term => term.toLowerCase()).join(" ");
  3.     const organizationName = organization.name.toLowerCase();
  4.     const searchString = `${searchTerms} ${organizationName}`;
  6.     return searchString.includes(searchText.toLowerCase());
  7. });
英文:

This was the solution:

  1. const filteredOrganizations = context.allOrganizations.filter(organization =&gt; {
  2.         const searchTerms = organization.topic.searchTerms.map(term =&gt; term.toLowerCase()).join(&quot; &quot;);
  3.         const organizationName = organization.name.toLowerCase();
  4.         const searchString = `${searchTerms} ${organizationName}`;
  6.         return searchString.includes(searchText.toLowerCase());
  7.     });

huangapple
  • 本文由 发表于 2023年6月13日 18:07:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76463791.html
  • javascript
  • node.js
  • react-native
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定