How to create a Search and Filter Box for an offline website

Question

I'd like to implement a search and filter box for my website which I'd be making an android app of it which is completely offline.

I have 15-20 html pages each contain description of products. consider products are A, B and C in 1.html and D, E and F in 2.html and upto 15 html

Under A header there is description of A item and same for B and C

 <h1 style="text-align: center;">A</h1> <p>&nbsp;</p> <p>This option defines how much topic information the software should gather before generating your essay, a higher value generally means better essay but could also take more time. You should increase this value if the generated article is under the word limit.</p> <p>&nbsp;</p> <h1 style="text-align: center;">B</h1> <p>&nbsp;</p> <p>This option defines how much topic information the software should gather before generating your essay, a higher value generally means better essay but could also take more time. You should increase this value if the generated article is under the word limit.</p> <p>&nbsp;</p> <h1 style="text-align: center;">C</h1> <p>&nbsp;</p> <p>This option defines how much topic information the software should gather before generating your essay, a higher value generally means better essay but could also take more time. You should increase this value if the generated article is under the word limit.</p>

I would like to add an filter and search box in home html page with 3 category to choose from

1) Item On Drop down list , option will be provided for A, B, C, D , E and so on ie header element.

2) Price: Is it 10-20$, 20-30$ and so on

3) Category It would be fruit, Vegetables or others.

and Based on 3 filter ( or two or one , if they have not selected any other filter ) will show the results to user instead of going through all html pages...

Is it possible?? Thanks in advance. My idea is to give an "Id" to each header with Category , price and item...and search on the base of there 3 elements.. But I don't know it'll work or not.

Answer 1

OPTION 1: what you need is a local DB, where to store records that you want to search.

https://developer.android.com/guide/topics/data/data-storage.html

OPTION 2: Put the details, of your pages, inside an array or object and display it dynamically with a loop. With this, you wont need multple html pages, for each product. you just need one. that dynamically reads your array/object

OPTION 3: if you can't re structure your code. I would advice you to look into. web/ html crawling. or use javascript, to parse specific elements of you html file, base on the search query value.

Answer 2

You need to have your items saved in a data collection for searching/filtering. This becomes a lot easier, faster and scalable, if you use a database to store your data. Based on the user selection, call a database query to select relevant data matching the user preferences.

Answer 3

This really is possible, but almost certainly a bad idea.

You could include a json file with all the product info and use it as an enormous view model. If you had a very very large inventory, it could be too much to expect from the client device. If you have specific questions about this, I'll be glad to answer them.

However, I've never known a business to keep inventory and pricing the exact same very long. Are you going to require customers update the app every time things change? Nobody who's worked tech support will tell you that's a good idea.

There is a solution to sending the users a friendly UI while updating the data at will. That's a web server. This is a project for a connected device.

Depending on the situation, maybe you can keep a set of local devices. In that case, you don't need the app store.