Auto-complete text field
Adding an auto-complete dropdown of pre-defined suggestions, whenever typing in a text box. An example would be showing a list of Brisbane suburbs beginning with "C" when typing "C" into the text box.
Wireframe
Preparation Checklist
Before you start this tweak, it's a good idea to run through our preparation checklist below:
- Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
- The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.
Coding Instructions
Step 1. Download the javascript files
Download the following javascript files to make the "Typeahead" auto-complete function work:
Create a new folder called /httpdocs/assets/themes/[THEME-NAME]/plugins/typeahead/js and copy the these javascript files into it.
Step 2. Add the scripts to the footer
Navigate to the footer template /httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html, and paste the following code directly after the other javascript files (it MUST be placed lower than jquery.min.js):
<script type="text/javascript" src="/plugins/typeahead/js/bloodhound.min.js"></script>
<script type="text/javascript" src="/plugins/typeahead/js/typeahead.bundle.min.js"></script>Step 3. Add the HTML
Add the following HTML into whichever form will be using the auto-complete function. In this example, it will be added to the checkout field, so the correct name and id attributes are applied to the input.
Note the input that the function is being applied to must have the class "typeahead" in order to be targeted correctly using the Jquery function.
<div id="city-state" class="form-group">
<label class="control-label col-xs-12 col-sm-4" for="cusref1">City/State</label>
<div class="col-xs-12 col-sm-8">
<input class="typeahead form-control" type="text" name="cusref1" id="cusref1" placeholder="City/State">
</div>
</div>Step 4. Add the javascript
Add the following javascript code to the top of the page where the function is being used.
Update the states array to include the new information included as part of the dropdown for the auto-complete function. The following example is using New Zealand states:
[%SITE_VALUE id:'footer_javascript'%]
<script type="text/javascript" language="javascript">
//Typeahead Autosuggest Function
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Akaroa', 'Albany', 'Alexandra', 'Algies Bay', 'Allanton', 'Amberley', 'Apiti', 'Arapuni', 'Aria', 'Arrowtown', 'Ashburton', 'Ashhurst', 'Atiamuri', 'Auckland', 'Awanui', 'Balclutha', 'Balfour', 'Belfast', 'Blackball', 'Blenheim', 'Bluff', 'Bombay', 'Brighton', 'Brightwater', 'Broadwood', 'Bulls', 'Burnham', 'Cable Bay', 'Cambridge', 'Carterton', 'Cave', 'Chatham Island', 'Cheviot', 'Christchurch', 'Clarks Beach', 'Clinton', 'Clive', 'Clyde', 'Coalgate', 'Collingwood', 'Conroys Gully', 'Coopers Beach', 'Coromandel', 'Cromwell', 'Culverden', 'Dannevirke', 'Darfield', 'Dargaville', 'Diamond Harbour', 'Dipton', 'Dobson', 'Drury', 'Dunedin', 'Eastbourne', 'Edendale', 'Edgecumbe', 'Eketahuna', 'Eltham', 'Ettrick', 'Fairlie', 'Featherston', 'Featherston South', 'Feilding', 'Foxton', 'French Pass', 'Geraldine', 'Gisborne', 'Glenorchy', 'Glentunnel', 'Gore', 'Granity', 'Great Barrier Island', 'Greta Valley', 'Greymouth', 'Greytown', 'Hamilton', 'Hampden', 'Hanmer Springs', 'Harihari', 'Haruru', 'Hastings', 'Haumoana', 'Havelock', 'Havelock North', 'Hawarden', 'Hawera', 'Hawkes Bay', 'Hector', 'Helensville', 'Henderson', 'Hikuai', 'Hikurangi', 'Hillside South Wairarapa District', 'Hokitika', 'Hororata', 'Howick', 'Hunterville', 'Huntly', 'Inglewood', 'Invercargill', 'Island', 'Johnsonville', 'Kaeo', 'Kaiapoi', 'Kaikohe', 'Kaikoura', 'Kaitaia', 'Kaitangata', 'Kaiwaka', 'Kamo', 'Karamea', 'Karori', 'Katikati', 'Kaukapakapa', 'Kawakawa', 'Kawerau', 'Kawhia', 'Kerikeri', 'Kimbolton', 'Kohukohu', 'Kotemaori', 'Kumara', 'Kumeu', 'Kurow', 'Landsdown', 'Lawrence', 'Leeston', 'Levin', 'Lincoln', 'Little River', 'Lower Hutt', 'Lumsden', 'Lyttelton', 'Mahoenui', 'Mamaku', 'Manaia', 'Mangakino', 'Mangantainoka', 'Mangaweka', 'Mangawhai', 'Mangonui', 'Manukau', 'Manurewa', 'Manutuke', 'Mapua', 'Maramarua', 'Martinborough', 'Marton', 'Masterton', 'Matakohe', 'Matamata', 'Mataura', 'Matawai', 'Matiere', 'Maungaturoto', 'Mercer', 'Methven', 'Middlemarch', 'Millers Flat', 'Milton', 'Moerewa', 'Mokau', 'Morrinsville', 'Mosgiel', 'Motueka', 'Mount Maunganui', 'Murchison', 'Murupara', 'Napier', 'Nelson', 'New Lynn', 'New Plymouth', 'Ngaruawahia', 'Ngatea', 'Ngongotaha Valley', 'Nightcaps', 'Norsewood', 'North Putaruru', 'North Shore City', 'Northland', 'Nuhaka', 'Oakura', 'Oamaru', 'Ohai', 'Ohakune', 'Ohau', 'Ohaupo', 'Ohinewai', 'Ohope', 'Ohura', 'Okaihau', 'Okato', 'Omakau', 'Omokoroa', 'Onerahi', 'Ongaonga', 'Ongarue', 'Oparau', 'Opotiki', 'Opua', 'Opunake', 'Orewa', 'Otago', 'Otaki', 'Otaki Beach', 'Otane', 'Otautau', 'Otematata', 'Otorohanga', 'Oturehua', 'Oturehura', 'Outram', 'Owaka', 'Owhango', 'Oxford', 'Paekakariki', 'Paeroa', 'Pahiatua', 'Paihia', 'Palmerston', 'Palmerston North', 'Palmerston Nth', 'Papakura', 'Papamoa', 'Paparoa', 'Paraparaumu', 'Pareora', 'Patea', 'Peel Forest', 'Pegasus', 'Picton', 'Piopio', 'Pirongia', 'Pleasant Point', 'Pokeno', 'Pongaroa', 'Porangahau', 'Porirua', 'Port Chalmers', 'Poukawa', 'Poverty Bay', 'Prebbleton', 'Pukeatua', 'Pukekohe', 'Pukerua Bay', 'Putaruru', 'Queenstown', 'Raetihi', 'Raglan', 'Rai Valley', 'Rakaia', 'Ranfurly', 'Rangiora', 'Raupunga', 'Red Beach', 'Reefton', 'Renwick', 'Reporoa', 'Rewa', 'Riverhead', 'Riverlands', 'Riverton', 'Rolleston', 'Ross', 'Rotherham', 'Rotokauri', 'Rotorua', 'Roxburgh', 'Ruakaka', 'Ruatoria', 'Ruawai', 'Runanga', 'Russell', 'Sanson', 'Seaview', 'Seddon', 'Shannon', 'Sheffield', 'Silverdale', 'Southbridge', 'Spring Creek', 'Springfield', 'Springston', 'St Andrews', 'Stratford', 'Taihape', 'Taipa', 'Tairua', 'Takaka', 'Takanini', 'Takapau', 'Taneatua', 'Tangimoana', 'Tangiteroria', 'Tapanui', 'Taranaki', 'Tarras', 'Taumarunui', 'Taupiri', 'Taupo', 'Tauranga', 'Te Anau', 'Te Aroha', 'Te Awamutu', 'Te Awanga', 'Te Karaka', 'Te Kauwhata', 'Te Kopuru', 'Te Kuiti', 'Te Mata', 'Te Puke', 'Temuka', 'Thames', 'Tikitiki', 'Timaru', 'Tinui', 'Tirau', 'Tokanui', 'Tokomaru Bay', 'Tokoroa', 'Tolaga Bay', 'Tongariro', 'Totaranui', 'Tuakau', 'Tuatapere', 'Turangi', 'Turitea', 'Tuturau', 'Twizel', 'Upper Hutt', 'Upper Moutere', 'Upper Plain', 'Urenui', 'via Nelson', 'Waddington', 'Waharoa', 'Waiau', 'Waiheke Island', 'Waihi', 'Waihi Beach', 'Waikaia', 'Waikanae', 'Waikari', 'Waikato', 'Waikouaiti', 'Waikuku Beach', 'Waimana', 'Waimate', 'Waimauku', 'Waimiha', 'Wainuiomata', 'Waiotira', 'Waiouru', 'Waipawa', 'Waipu', 'Waipukurau', 'Wairarapa', 'Wairoa', 'Waitakere', 'Waitara', 'Waitati', 'Waitoa', 'Waiuku', 'Wakefield', 'Wallacetown', 'Walton', 'Wanaka', 'Wanganui', 'Warkworth', 'Waverley', 'Wellington', 'Wellsford', 'Westland', 'Westport', 'Whakatane', 'Whangamata', 'Whangaparaoa', 'Whangarei', 'Whataroa', 'Whiritoa', 'Whitianga', 'Winton', 'Woodend', 'Woodville', 'Wyndham'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
</script>
[%/SITE_VALUE%]