Make your own search bar?

Question

I want to know how to make your own search bar using HTML, or Javascript, I have a basic knowledge of both, and I know you use <form> tags.

Answer 1

Search bars are more commonly made in PHP.

Heres a tutorial

What You&#039;ll Need

In order to complete this article, you&#039;ll need the following tools and technologies:

    * One My SQL database

    * PHP support

    * A text editor

Creating Our Database

If you&#039;re unsure how to create a database through your host, please contact your system administrator for further information. Once you&#039;ve created a database, you&#039;ll need a way to connect to it, create a table, and enter data for appropriate entities. One popular database administration tool for My SQL is PHP My Admin, or one that I&#039;m particular fond of is SQLyog, which currently supports a free version (Community Edition) which is sufficient for the purposes of this article.

Creating Our Table

Our table needs to be created with the following columns and their corresponding data types and lengths:

Column Name Data Type Length Null or Not Null Primary key? Auto Increment

ID INT 1 Not Null Yes Yes

FirstName Varchar 50 Not Null No No

LastName Varchar 50 Not Null No No

Email Varchar 50 Not Null No No

PhoneNumber Varchar 15 Not Null No No

While an in-depth analysis of database design is beyond the scope of this article, let&#039;s briefly discuss the concepts of columns, data types and lengths.  A database table is composed of columns and rows, much like an Excel spread sheet. A column gives us a unique way to identify a certain entity, such as a first name. Data types are merely what type of data the column stores, such as a number, variable characters, date, time, etc. Lengths allocate a specified amount of memory (storage) to the table column. In our case, we&#039;re using variable characters that allow more flexibility. In other words, if the first or last name doesn&#039;t occupy exactly 50 units of data in our column, only that which is occupied will be allocated and stored. Furthermore, there should be no null (empty) entities for any staff members. Lastly, it should be noted that the reason our first row is highlighted in yellow is to identify that the ID column is our primary key. A primary key in database design ensures that each record is guaranteed to be unique. This column is also set to auto increment, ensuring that each record has a unique number assigned to it by the database engine.

Enter Staff Members into the table

Once you&#039;ve created the columns for your database table, proceed to fill your columns with data. Six records should suffice for the purposes of this article. A replica of mine is below:

Column ID FirstName LastName Email PhoneNumber

2 Ryan Butler [e-mail] 417-854-8547

3 Brent Callahan [e-mail] 417-854-6587

Create the Form

In order to create the search form, you&#039;ll need to open a text editor of your choice. One that is free is PSPad. You can use any text editor you want; though it&#039;s recommended to choose one that has syntax highlighting to make PHP debugging and programming a bit easier. When creating the search form page, make sure to save it with a .php extension, otherwise, the PHP code will not execute. Once the form is saved, begin with the following markup:

1 &lt;!DOCTYPE  HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;  &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;

2 &lt;html&gt;

3   &lt;head&gt;

4     &lt;meta  http-equiv=&quot;Content-Type&quot; content=&quot;text/html;  charset=iso-8859-1&quot;&gt;

5     &lt;title&gt;Search  Contacts&lt;/title&gt;

6   &lt;/head&gt;

7   &lt;p&gt;&lt;body&gt;

8     &lt;h3&gt;Search  Contacts Details&lt;/h3&gt;

9     &lt;p&gt;You  may search either by first or last name&lt;/p&gt;

10     &lt;form  method=&quot;post&quot; action=&quot;search.php?go&quot;  id=&quot;searchform&quot;&gt;

11       &lt;input  type=&quot;text&quot; name=&quot;name&quot;&gt;

12       &lt;input  type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Search&quot;&gt;

13     &lt;/form&gt;

14   &lt;/body&gt;

15 &lt;/html&gt;

view plain | print | ?

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt; &lt;title&gt;Search Contacts&lt;/title&gt; &lt;/head&gt; &lt;p&gt;&lt;body&gt; &lt;h3&gt;Search Contacts Details&lt;/h3&gt; &lt;p&gt;You may search either by first or last name&lt;/p&gt; &lt;form method=&quot;post&quot; action=&quot;search.php?go&quot; id=&quot;searchform&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;name&quot;&gt; &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Search&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

If you&#039;re familiar with HTML, everything should look familiar until you reach the opening form tag. Inside the opening form tag, the key line of code is the action attribute. We set the action of the form to the name of our file and then append on a query string of “go”. We&#039;ll discuss why this is important in the next section (search_start.php).