The search box generator helps you set up a search box. You can customize many elements to make the box look the way you want. At the bottom of the page, you can see a preview of how it will look. Additionally, you’ll find instructions on how to insert it into your page.
We recommend that you keep the search box as simple as a list, as most users will only use alphabetical and keyword searches.
|
Insert from 1 to 6 buttons in the search box by entering the button texts in the fields below. |
||
| Text on buttons | ||
|---|---|---|
| 1. button: | ||
| 2. button: | ||
| 3. button: | ||
| 4. button: | ||
| 5. button: | ||
| 6. button: | ||
|
|
||
| Settings | Value | Explanation |
| HTML-element: | Specify the ID (e.g., #box1) of the element to be displayed. | |
| Tracking: | Google Analytics virtual tracking. Only necessary if you have more than one dynamic search box per page |
|
| Width: | Specify the width of the search box. If the field is empty, the width will be set to 100%. | |
| Height: | Specify the height of the search box in pixels. | |
| Background color: | Find color code on this page by clicking on the color you want. | |
| Background color: | Specify the absolute path to an image to be used as the background in the search box. | |
| Text: | Specify the text to appear on top of the background image. The following tags can be used: <h1>, <p> og <ul> | |
|
|
||
| Advanced settings | Value | Explanation |
| Toned buttons: | Specify whether the buttons should have a shaded effect. This is only relevant when using a background image. | |
| First button stands alone: | Specify whether the first button (typically the search field) should span the entire width of the box. This only takes effect if there are more than 2 buttons. | |
| Placement of the search field: | Specify which menu displays the search field. | |
| Search as 'autocomplete: | Specify whether the search should be performed as 'autocomplete' or be a standalone menu item. | |
| Number of characters before search is activated: | Specify how many characters need to be typed in the search field before the search (autocomplete) is activated. | |
| Placeholder: | Specify placeholder text in the search field. Does not work in IE. < 10. | |
| Placement of alphabet: | Specify which menu displays the alphabetical overview. | |
| Starting letter: | Specify the starting letter for the alphabetical display. | |
| Expand menu immediately: | Specify whether a menu (which one) in the search box should be expanded when the page loads. | |
| Expand subitems: | Specify whether subitems in the menus should be expanded by default. This does not apply to alphabetical listings. | |
|
|
||
| Data settings | Value | Explanation |
| Datatype: | Specify the type of data the search box should use. | |
| Data source: |
|
|
|
|
||
Create an HTML element on the page, in which you insert:
In the page settings of the page with the HTML field, you need to insert in the 'Extended' tab and the 'Extra field for Javascript' field:
Additionally, you need to create the element that constitutes the data in the search box.
If you have selected liste, you need to create a standard bullet list in TYPO3, and in the HTML view of the editor, addclass="au_databox_list" id="" til <ul>-tagget.
| Id | Parent | Name | Fakultet |
|---|---|---|---|
| 1 | 0 | 1Internationalt Center | 1 |
| 2 | 0 | 2Kultur og Samfund, Institut for | 2 |
| 3 | 0 | Psykologi, Institut for | 2 |
| 4 | 0 | Folkesundhed, Institut for | 4 |
| 5 | 0 | Agroøkologi, Institut for | 5 |