jQuery Search Form - How to direct to internal pages

Question

I created my first Javascript search form with a Autocomplete Script. Everything is working perfectly, but I'm having trouble finding out how I can have it where after the user searches the website for his product they can hit "enter" and they will be directed to the corresponding "products" URL page.

Steps of operation -

Search product name
Hit's enter or clicks search output, and is directed to corresponding items page. (Ex. www.website.com/product_234)

I created this doing a tutorial about how to have it populate with currencies, but i'm very new to Jquery and Javascript. Does anybody have any advice on how to achieve this basic search function?

Here is a Demo

I also forgot to mention that to activate the auto complete script just start typing numbers of the forms from the JS file - (Ex. 00.15B, 00.2C) I'd like it to then be able to link to a URL of my choice for each "form" (00.15B, 00.2C)

So if the user selects 00.15B it will then direct them to the webpage. (Ex. www.website.com/form_00_15b)

Thanks!

    $(function(){
  var currencies = [
    { value: '00.15B', data: 'ButtHole' },
    { value: '00.2C', data: 'ALL' },
    { value: '04-002A', data: 'DZD' },
    { value: '08-010B', data: 'EUR' },
    { value: '10.01A', data: 'AOA' },
    { value: '10.1B', data: 'XCD' },
    { value: '10.3A', data: 'ARS' },
    { value: '20.01B', data: 'AMD' },
    { value: '20.01DA', data: 'AWG' },
    { value: '20.12A', data: 'AUD' },
    { value: '20.15A', data: 'AZN' },
    { value: '20.16A', data: 'BSD' },
    { value: '20.16B', data: 'BHD' },
    { value: '20.17A', data: 'BDT' },
    { value: '20.23A', data: 'BBD' },
    { value: '20.2A', data: 'BYR' },
    { value: '20.33A', data: 'BZD' },
    { value: '20.35A', data: 'XOF' },
    { value: '20.35C', data: 'BTN' },
    { value: '20.37A', data: 'BOB' },
    { value: '20.39A', data: 'BAM' },
    { value: '20.39B', data: 'BWP' },
    { value: '20.44B', data: 'BRL' },
    { value: '20.44C', data: 'BND' },
    { value: '20.44D', data: 'BGN' },
    { value: '20.44E', data: 'BIF' },
    { value: '30.12A', data: 'KHR' },
    { value: '40.10A', data: 'XAF' },
    { value: '40.10B', data: 'CAD' },
    { value: '40.10C', data: 'CVE' },
    { value: '40.10D', data: 'KYD' },
    { value: '40.1A', data: 'CLP' },
    { value: '40.1B', data: 'CNY' },
    { value: '40.4A', data: 'COP' },
    { value: '40.5B', data: 'KMF' },
    { value: '40.5C', data: 'CDF' },
    { value: '40.5D', data: 'CRC' },
    { value: '40.6A', data: 'HRK' },
    { value: '40.6B', data: 'CUC' },
    { value: '40.6C', data: 'CZK' },
    { value: '41.2A', data: 'DKK' },
    { value: '41.2B', data: 'DJF' },
    { value: '41.2C', data: 'DOP' },
    { value: '45.1B', data: 'EGP' },
    { value: '50.10A', data: 'GQE' },
    { value: '50.10C', data: 'ERN' },
    { value: '60.13A', data: 'EEK' },
    { value: '60.13C', data: 'ETB' },
    { value: '60.13D', data: 'FKP' },
    { value: '60.1A', data: 'FJD' },
    { value: '60.23D', data: 'XPF' },
    { value: '60.23E', data: 'GMD' },
    { value: '60.4A', data: 'GEL' },
    { value: '60.5B', data: 'GHS' },
    { value: '60.5B', data: 'GIP' },
    { value: '60.5E', data: 'GTQ' },
    { value: '60.5I', data: 'GNF' },
    { value: '60.6A', data: 'GYD' },
    { value: '60.7E', data: 'HTG' },
    { value: '60.8A', data: 'HNL' },
    { value: '70.0A', data: 'HKD' },
    { value: '70.0B', data: 'HUF' },
    { value: '70.10DB', data: 'ISK' },
    { value: '70.23A', data: 'INR' },
    { value: '70.24A', data: 'IDR' },
    { value: '70.25A', data: 'IRR' },
    { value: '70.5B', data: 'IQD' },
    { value: '70.9A', data: 'ILS' },
    { value: '80.16A', data: 'JMD' },
    { value: '80.2A', data: 'JPY' },
    { value: '90.14A', data: 'JOD' },
    { value: '90.14B', data: 'KZT' },
    { value: '90.16A', data: 'KES' },
    { value: '90.3A', data: 'KPW' },
    { value: '90.3B', data: 'KRW' },
    { value: '90.3C', data: 'KWD' },
    { value: '90.5A', data: 'KGS' },
    { value: '90.9B', data: 'LAK' },
    { value: 'Allergy Label', data: 'LVL' },
    { value: 'T20.01A', data: 'LBP' },
    { value: 'T20.01B', data: 'LSL' },
    { value: 'T20.03A', data: 'LRD' },
    { value: 'T20.03B', data: 'LYD' },
    { value: 'T20.03C', data: 'LTL' },
    { value: 'T20.03D', data: 'MOP' },
    { value: 'T20.15A', data: 'MKD' },
    { value: 'T20.17A', data: 'MGA' },
    { value: 'T20.23A', data: 'MWK' },
    { value: 'T20.23B', data: 'MYR' },
    { value: 'T20.35C', data: 'MVR' },
    { value: 'T20.39A', data: 'MRO' },
    { value: 'T20.39B', data: 'MUR' },
    { value: 'T40.8A', data: 'MXN' },
   
  ];
  
  // setup autocomplete function pulling from currencies[] array
  $('#autocomplete').autocomplete({
    lookup: currencies,
    onSelect: function (suggestion) {
      var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
      $('#outputcontent').html(thehtml);
    }
  });
  

});

Hello and welcome to StackOverflow! I recommend you should have a look at our help center, particularly How to ask a good question and MCVE. It is hard to tell from your question what it is you have tried, and where you are stuck. Since you are trying to create a website, you might try creating a working example in CodePen - people can use that to build on your efforts and you can use it to try out new things. — 1800 INFORMATION
– 1800 INFORMATION, Commented Sep 30, 2015 at 22:51
Thank you for the reply. I added a Demo in my question, and tried to better explain myself with what i'm trying to achieve. Is this better? — user5395191
– user5395191, Commented Sep 30, 2015 at 23:03
Now i'm realizing that the JSFiddle only works properly on my screen, once i try to share, it drops the Js and the CSS even though it works on my screen with the external files. I might have to figure this out first... — user5395191
– user5395191, Commented Sep 30, 2015 at 23:11
Isn't easiest to just make a normal form to post values in queries? — tscpp
– tscpp, Commented Jul 12, 2019 at 5:58

Community · Accepted Answer · 2017-05-23 12:01:06Z

1

See How to go to a URL using jQuery? for advice on opening a different page URL from within JS

//As an HTTP redirect (back button will not work )
window.location.replace("http://www.google.com");

//like if you click on a link (it will be saved in the session history, 
//so the back button will work as expected)
window.location.href = "http://www.google.com";

So to open the page including the url component that includes the selected item you would do something similar to the following:

// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
 lookup: currencies,
onSelect: function (suggestion) {
  // var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
  // $('#outputcontent').html(thehtml);
   window.location.href = "http://yoursite.com/product_" + suggestion.value;
 }
});

You may also want to use JQuery and bind to the form input change event and use the same approach there rather than the autocomplete onSelect.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Oct 1, 2015 at 3:32

Peter Scott

1,32612 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5395191 Over a year ago

Sott Thanks Peter. The only issue is i'll be linking to an external server that host our products on another website for each form with different links. So i'll have to be able to edit each URL for each selection. So even though they search "00.15B" the URL is not "www.website.com/00_15B" it's more like "website.com/catalog/?ProviderID=206190&CatalogID=1167 (I did not explain this right in my first post, sorry)

user5395191 Over a year ago

I'm trying to figure out a way where i can just have a list of every item that i want to show in the search form, and then just be able to edit a individual link for each item. So i'm thinking of it resemble the current list of currencies at the top. This might not be the best way, but just seeing if the basics will work. Maybe i can find some information on it today. All the Jquery courses i take never show anything about search forms. Need to keep looking.

Peter Scott Over a year ago

if i understand correctly you would just modify the select values and the string for the url that is constructed but perhaps I'm missing something?

user5395191 Over a year ago

I created a quick wire frame to better explain hopefully - postimg.org/image/gwejrqd2h

user5395191 Over a year ago

I understand what you mean, and that actually makes perfect sense. Just trying to wrap my ahead around having it where each URL is custom. But i see what your saying, and i can experiment with that. suggestion too.

Collectives™ on Stack Overflow

jQuery Search Form - How to direct to internal pages

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related