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](http://stackoverflow.com/help/how-to-ask) and [MCVE](http://stackoverflow.com/help/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](http://codepen.io/) - people can use that to build on your efforts and you can use it to try out new things. — 1800 INFORMATION, Sep 30 '15 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, Sep 30 '15 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, Sep 30 '15 at 23:11
Isn't easiest to just make a normal form to post values in queries? — tscpp, Jul 12 '19 at 05:58

score 1 · Answer 1 · edited May 23 '17 at 12:01

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 '17 at 12:01

Community

1
1

answered Oct 01 '15 at 03:32

Peter Scott

1,318
12
19

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 "http://www.website.com/catalog/?ProviderID=206190&CatalogID=1167 (I did not explain this right in my first post, sorry) – user5395191 Oct 01 '15 at 15:30
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. – user5395191 Oct 01 '15 at 15:33
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? – Peter Scott Oct 01 '15 at 15:40
I created a quick wire frame to better explain hopefully - http://postimg.org/image/gwejrqd2h/ – user5395191 Oct 01 '15 at 15:57
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. – user5395191 Oct 01 '15 at 15:58

jQuery Search Form - How to direct to internal pages

1 Answers1