How can I make the search form in my navigation Bar work? Using Bootstrap 4

[edinav24550678]

Hello all,

I've made a website in Dreamweaver using Bootstrap 4 and it includes a navigation bar with a search button.

This is the code of the search button:

<form class="d-flex"> <input class="form-control me-2" type="text" placeholder="Search site"> <button class="btn btn-searcher" type="button">:magnifying_glass_tilted_left:</button> </form> </div></nav> <form class="form-inline my-2 my-xs-0 small-screen"></form>

I've tried to search internet on how to add data to my website for the search form, but I did not find a clear anwer.

I know how to add meta-tags to a page, but I don't think that's enough.

Can someone explain to me step-by-step how I should proceed?

Thank you!

p.s. Please let me know it you need more information.

[Jon Fritz]

The forms in Bootstrap templates don't actually "do" anything, they're just the bare HTML and CSS of the front-end of a form. You'll need to connect them to a form processing script. 

Your hosting company may have a form processing script available to you, with the instructions to implement it. Contact them to see what, if anything is available for use. If they don't have a script, they should at least be able to point you in the right direction as to what you can use, based on what's installed on your server.

With a search box, you'll need to have a database driven site, or your search functionality is going to be very limited and clunky. Adding a Google Search bar may be an option for you

[edinav24550678]

Hello Jon Fritz,

Can you tell me how a form processing script works? I use Dreamweaver CC.

[Jon Fritz]

A form processing script resides on your server and takes information submitted to it from your form, processes it.

They can do all kinds of things, from sending emails, to uploading images, to spitting out search results.

They can also do absolutely nothing, if installed on a server that's not set up for them.

Dreamweaver can't create a form processing script for you, that you'll need either a fairly experienced programmer, a 3rd party script, or a third party app (like Google) that moves all the heavy lifting off your server.

[edinav24550678]

Looks as if it's nearly impossible for me to make my website searchable! Come on , there must be a way for me to fix this?

[B i r n o u]

as tell you @Jon Fritz first place to check is your web hotel, to see if they propose such form processing script.

then, in order to help you step by step, implementing a search engine on your site first requires a few points of clarification:

• what information do you want to search for, and in what scope? The web or just your site?
• If it's the web, all existing search engines offer an API to meet your needs.
  (here is one exemple above many)
  • https://pypi.org/project/duckduckgo-search/ 
  • https://github.com/topics/duckduckgo-api
  • https://github.com/duckduckgo
• If it's about just your site, these APIs can also help you, but sometimes it's not necessary to resort to such a cavalry :
  • It all depends on what you want to search for...
  • and where this information is located: database, metadata associated with pages, textual content in the pages themselves,
  • and in what form they are: text, binary data, structures... etc....
• then do you have a thesaurus (https://www.thesaurus.com/) or controlled dictionaries you can draw on...
  there is an old article on Puce et Média that is interesting to catch the idea behing words and architecture... https://www-puce--et--media-com.translate.goog/taxonomie-thesaurus-et-vocabulaire-controle/?_x_tr_sl...
• do you need a spell or syntax checker to compensate for input problems...
• will searches be multilingual... or does your site offer only one version?
• and so on depending on your needs

In short, as you can see, it's not possible to propose any ideas without clarifying what you want to put in place.

[edinav24550678]

I just want users to be able to search the site on names and terms used in the pages on the site, for instance "conference', "Great Expectations" etc  that might interest them, in the form of meta tags in the html-code. I'm striving to publish the site within three days, but I'm thinking to hide the search button for the time being, for I don't think I can accomplish this in such a short time.

Spell or syntax checker might be handy, but this is not my first priority. My site contains Dutch and English text, so I like to have a bilingual search.

Hopefully I've made my intentions a bit clearer.

[Nancy OShea]

In the absense of a database driven site to search, you must use a 3rd party search engine.

The world's most popular search engine is Google.  Create an account and follow the steps on Google Developer's site.

https://programmablesearchengine.google.com/controlpanel/create

[edinav24550678]

Hello Nancy,

I've got a Google account, I will chek it out.

[edinav24550678]

Hello Nancy,

I made my own search engine with an apdapted lay-out, and I tried it on a test page. However, it does not exactly look like Google showed it to me. I see a ugly 'clear-button' at the right side:

I really don't know why it looks that way or what I can do to fix this.

Well, I suppose I should ask Google.

[Nancy OShea]

That looks like your browser's default form & button styles. 

To make it look pretty, you'll need to tweak the code with Bootstrap classes.

If you want more help, post a link to your online test page.

[Nancy OShea]

Get Google Search and add it to your Navbar search form.

https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox

[BenPleysier]

Please be reminded that Bootstrap 4 has reached its End of Life (EOL) on the 1st Jan 2023.

You should be using Bootstrap 5

[edinav24550678]

I will use Bootstrap 5. However, I made the last website with Bootstrap 4 and will keep it that way for now.