基本搜索功能 firebase

Question

I am just trying to search by keyword. I have a search-box and when the user types i am trying to query firestore to find the closest search term. Please can I get help with do. I just want. to let the user search and it displays similar search terms from the data state

This is my code

const SearchScreen = (props) => {
    const [searchDetails, setSearchDetails] = useState('');
    const [data, setData] = useState([]);
    const [recent, setRecent] = useState(true);
    const inputRef = React.useRef()
  
    const searchFilterFunction = async (searchTerm) => {
        setRecent(false)
        setSearchDetails(searchTerm);
        let data = []
    const db =  firebase.firestore().collection('Posts')
    const check = searchDetails === undefined? '': searchDetails
    await db.orderBy('name').startAt(check ).endAt(check + "\uf8ff" ).get().then(()=>{
        for (let i = 0; i < db.docs.length; i++) {
            data.push(snapshot.docs[i].data());
          }
        setData(data)
    })

    };
    const handleSearchResults = (name) =>{
        if(recent!== true){
            dispatch(searchRecent(name))
        }
        searchFilterFunction(name)
        props.navigation.navigate({
            routeName: "SearchResults",
            params:{
                searchDetails: searchDetails,
                searchData: data,
            }
          })
    }
    return (
        <View style={styles.container}>
                <SearchBar
                    placeholder="Search Recipe or ingredient."
                    onChangeText={(text) => searchFilterFunction(text)}
                    value={searchDetails}
                    ref={inputRef}
                    onSubmitEditing={()=> handleSearchResults(searchDetails)}
                />
            {/* shows the search terms like auto suggest */}
               <FlatList
                    showsVerticalScrollIndicator={false}
                    data={data}
                    keyExtractor={(item, index) => item.postId}
                    renderItem={renderItem}

                />
        </View>
    );
};
export default SearchScreen;

Answer 1

The feature that you are looking for has to be done through a third-party library. Cloud Firestore doesn't support native indexing or search for text fields in documents. Additionally, downloading an entire collection to search for fields client-side isn't practical.

One alternative is to use “ Algolia ”, consider a note-taking app where each note is a document:

// /notes/${ID}
{
  owner: "{UID}", // Firebase Authentication's User ID of note owner
  text: "This is my first note!"
}

You can use Algolia with Cloud Functions to populate an index with the contents of each note and enable search. First, configure an Algolia client using your App ID and API key, here it is an example with Node.js:

// Initialize Algolia, requires installing Algolia dependencies:
// https://www.algolia.com/doc/api-client/javascript/getting-started/#install
//
// App ID and API Key are stored in functions config variables
const ALGOLIA_ID = functions.config().algolia.app_id;
const ALGOLIA_ADMIN_KEY = functions.config().algolia.api_key;
const ALGOLIA_SEARCH_KEY = functions.config().algolia.search_key;

const ALGOLIA_INDEX_NAME = 'notes';
const client = algoliasearch(ALGOLIA_ID, ALGOLIA_ADMIN_KEY);

After that you have to add a function that updates the index each time a note is written:

// Update the search index every time a blog post is written.
exports.onNoteCreated = functions.firestore.document('notes/{noteId}').onCreate((snap, context) => {
  // Get the note document
  const note = snap.data();

  // Add an 'objectID' field which Algolia requires
  note.objectID = context.params.noteId;

  // Write to the algolia index
  const index = client.initIndex(ALGOLIA_INDEX_NAME);
  return index.saveObject(note);
});

Once your data is indexed, you can use any of Algolia's integrations for iOS, Android, or Web to search through the data.

For example, to use with React-navite you can check the link

Also, found this useful video with an implementation example for Algolia and Firebase called from a Frontend.