Выделение проблемы для текста поиска - React Native - PullRequest
Новая
       43

Выделение проблемы для текста поиска - React Native

0 голосов
/ 29 апреля 2020

У меня есть приложение React Native, а также панель поиска и FlatList. Когда я что-то ищу в панели поиска, текст должен быть выделен в списке.

Поиск по одной строке работает нормально:

enter image description here

Но теперь, когда я набираю "час посещения", ни посещение, ни час не выделяются

enter image description here

Я использую функцию для выделения текста. Значение SearchBar хранится как this.state.value, и я передаю его как реквизит. Логика c, которую я использую внутри renderItem из Flatlist, выглядит следующим образом 

 getHighlightedText = text => {
      const { value } = this.props
      const parts = text.split(new RegExp( `(${value})` ,'gim' ));
      console.log('split:', parts);
      return (<Text>
               {parts.map(part => (part.toLowerCase() === value.toLowerCase())
                            ? <Text style={{backgroundColor: 'red'}}>{part}</Text> 
                            : part)}
            </Text> );
       }


return
<Text> {getHighlightedText(Desc)} </Text>;

Это прекрасно работает, когда я ищу одно слово. Например, если в моем плоском списке есть 2 пункта - «Моя собака» и «Ее кот». Если мой текст для поиска «Собака», то собака выделяется красным цветом. Но если я ищу «M Dog» или «MD», то ничего не выделяется. Он должен выделять символы, а не слова. Пожалуйста, помогите мне исправить код !!!!!

Обновлен мой код

Так что я буду разбивать значение поиска, а затем попытаюсь выделить для каждого текста поиска. если я ввожу «час посещения», он разделяется на «визит» и «час». Почему-то л oop выполнен только для «посещения», а не «часа». Некоторая ошибка в моем коде. Я только добавил для l oop. Пожалуйста помоги!!! : 

getHighlightedText = text => {
      const val = value.split(' ');    //search value is split and stored in val array. "list" and "hour"

      // below my item Description is split based on my search terms "visit" n "hour" and then stored in vals array

        const vals = val.map( valu => {.      
      var regex = new RegExp( `(${valu})` ,'gim' );
      return text.split(regex);
         } ) 

         const merged = [].concat.apply([], vals);   //vals is merged into 1 array



//below I am looping for each of my search text 1st "visit" then "hour"         
      for(i=0; i<val.length; i++){
      const l = val[i];

      return (<Text>
               {merged.map(part => (part.toLowerCase() === l.toLowerCase())
                            ? <Text style={{backgroundColor: 'red'}}>{part}</Text> 
                            : part)}
            </Text> );
      }

      }


return
<Text> {getHighlightedText(Desc)} </Text>;  //using my getHighlightedText in my renderItem

L oop завершается из-за оператора возврата. «визит» выделен, но «час» не так, как l oop никогда не достигал «час».

Помогите пожалуйста !!!

1 Ответ

0 голосов
/ 29 апреля 2020

Просто используйте string.includes(substring) вместо ===.

Поскольку использование === представляет одно и то же значение. Но включает только необходимость "содержит".

Это может решить вашу проблему, попробуйте. :) 

return (<Text>
               {parts.map(part => (value.toLowerCase().includes(part.toLowerCase()))
                            ? <Text style={{backgroundColor: 'red'}}>{part}</Text> 
                            : part)}
            </Text> );
       }

--------- Обновление, чтобы соответствовать новому вопросу обновления -----

Если вы хотите добиться аналогичного эффекта, я бы предложил вам разбить строку поиска на .split(" "); для массива и сопоставить каждую строку в массиве, чтобы выделить

--------- Обновить новый вопрос ------------- ------

Вам не нужно использовать для l oop! Просто добавьте это к вашему состоянию что-то вроде: 


{parts.map(part => (part[0].toLowerCase() === valu.toLowerCase()||part[1].toLowerCase() === valu.toLowerCase())  //change to your parameter
...