node.js html querying and parsing

Question

How do i make a dynamic search bar? Do i need to use html methods? How can i make the bar dynamic?

Hi, i just started learning node.js... while i never developed web applications. I don't want you to write the code, i just want you to point me to the right direction.

<form>
 <input type="text" name="search" placeholder="Search..">
</form>

Now, how do i get the information someone types in the search bar? And what should i use to have the search bar display information without reloading the page?

Answer 1

Assuming you will not use any JS framework, the easiest way is to use a input with auto-complete feature. One example: http://jqueryui.com/autocomplete/

A similar question: jQuery autocomplete with callback ajax json

Answer 2

you could use socket.io to create a bidirectional connection with your server, and update your list each time something new pop's up

and if you're new to the server, take a look at my blog: https://mathieuauclairweb.wordpress.com/2017/05/02/how-to-make-a-nodejs-server-with-to-database-part-1/

I might add a tutorial on how to use socket.io this afternoon

• anony11: Thanks, so the best way to do what i want i to use JSON? i'm quite new.
• MathieuAuclair: yes use body parser, it's doing the parsing for you, really useful! And JSON is pretty much the standard in javascript

Answer 3

You have to use both JavaScript(jQuery) client-side code to make AJAX calls on 'keyup' handler and server-side PHP (or whatever language you use) routine to handle that AJAX call and answer it with JSON array.

If your search will return only plain text results, then you can check aria-autocomplete on the Internet. There are plenty examples. In this method your server answer should contain a JSON array. In a very similar way you can also populate <option> tags in a <select>.

If you dig much more without using aria-autocomplete you can make your own custom-styled display of answers. You can take a look at my site http://www.zahranvane.com/ (only in Bulgarian language, sorry). There is a search field in the header. Type some number (like 511) and you will see matching results in a poping div. To achieve this approach the server-side script returns formatted HTML which replaces the content of the poping div.

Answer 4

As @user3429660 advice you use jquery autocomplete.

Create a function who call a webservice that you have defined in your nodejs with express for example. the web service return data in JSON to the function and the view is updated with jquery

Answer 5

1) What you are looking for is getting the value out of the input:

Get the value in an input text box

2) Not reloading page -> look into AJAX (many tutorials online...)