How can i code a search bar with results that connected to links ? ( See Description )

Question

I need to code a search bar like play store and sololearn search bar when you type something you will get results i need this system i know that's an applications in native but this is an example, someone can help me with that and gave me a simple code ,?

Answer 1

Okay.
1st: datalists are used for providing a list of input values for an input field. They aren't really for results returned from a search.

Try something like this:

https://code.sololearn.com/W1lLsDzlkHQR/?ref=app

Answer 2

are the results in a database or stored locally in an array or flatfile? That will make a difference in how you access the results as you type in the searchbar.

You'll probably want jQuery and a keyup binding on the searchbar so as they type the source of data can be queried and the results narrowed. can add a timer here so they have to stop typing for half a second before a query fires to keep any remote calls from backing up and lagging.

Then wherever your source is, query it based on typed input and return data in a format that works for what you're doing. JSON is an excellent choice. The use that to build html ti put into a result container under the searchbard.

Answer 3

Yep. I know that but i'm developing an application that coded with HTML5, CSS, JS and some of PHP codes, Otherwise it's offline app so i don't need to have a web server to manage app, i'm using Google firebase for notification so i have used that code with datalist but i can't link results ( value ) with links for example i have type any thing now i must click submit to redirect me to the page that i searched about it

Answer 4

Oh. Yep thanks Adam i will use this code and i will work on it now

Answer 5

so, will it have the same result because all of data results are offline i will use them in HTMl5 app

Answer 6

Couple of questions to make sure I understand.
1. are you returning search results as you type or after a click?
2. It is the results after you search that you want to be links?

Answer 7

Yes, it's return as i type and to be links

Answer 8

k. so in the loop that displays the returned data:

var row = '<a href=" ' + return.link + ' ">' + return.text + '</a>';
$(#container").append(row);

Answer 9

sorry, i still learning JS can you give me an example for this code ? plz i didn't understand what i must edit

Answer 10

it might help if you post your code. Then I can tell you exactly what to edit and keep it consistent with what you already have. right now I'm kind of guessing based on your description alone. :)

Answer 11

here we go, this is an example and minimal code to explain what i want to say .
https://code.sololearn.com/Wal2k4FRbtU3/?ref=app

Answer 12

yes. though you will only be able to access other local files via ajax calls in that case.

Answer 13

Adam, Can i download jquery.min.js )
to use it offline ?