Enabling Autocomplete
Stay organized with collections
Save and categorize content based on your preferences.
Apart from customizing colors, fonts or link style in the Control Panel,
it is possible to influence the look and feel and the behavior of
the search box via custom HTML attributes.
This allows you to override some of the general settings from Control Panel.
It is especially useful when you want one search box (e.g. one on the homepage)
to behave differently than other ones on the site.
For example, you can enable or disable autocomplete feature using
enableAutoComplete attribute. By default, it is set to
true if autocomplete is enabled in the Control Panel. By
switching the value to false you can control how the element
behaves.
<!-- Insert your own Programmable Search Engine ID here -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<!-- Try switching the attribute value to "true" or "false" -->
<div class="gcse-search" enableAutoComplete="true"></div>
Note: Newly enabled or added autocompletions may take several hours to appear.
There are many more options available. You can read about other search box
customization options in
Programmable Search Element Control API section.
For more information on Autocompletions, please see the Help Center article on Autocomplete.
Next...
Continue to Customizing search results.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-08-21 UTC.
[null,null,["Last updated 2024-08-21 UTC."],[[["\u003cp\u003eCustomize the search box's look, feel, and behavior using custom HTML attributes, overriding general Control Panel settings.\u003c/p\u003e\n"],["\u003cp\u003eControl individual search boxes differently, like enabling or disabling autocomplete for specific instances using the \u003ccode\u003eenableAutoComplete\u003c/code\u003e attribute.\u003c/p\u003e\n"],["\u003cp\u003eExplore additional search box customization options in the Programmable Search Element Control API documentation.\u003c/p\u003e\n"],["\u003cp\u003eNewly enabled or added autocompletions may require several hours to become visible.\u003c/p\u003e\n"],["\u003cp\u003eLearn more about Autocompletions in the dedicated Help Center article.\u003c/p\u003e\n"]]],[],null,["# Enabling Autocomplete\n\nApart from customizing colors, fonts or link style in the [Control Panel](https://programmablesearchengine.google.com),\nit is possible to influence the look and feel and the behavior of\nthe search box via custom HTML attributes.\n\nThis allows you to override some of the general settings from Control Panel.\nIt is especially useful when you want one search box (e.g. one on the homepage)\nto behave differently than other ones on the site.\nFor example, you can enable or disable autocomplete feature using\n`enableAutoComplete` attribute. By default, it is set to\n`true` if autocomplete is enabled in the Control Panel. By\nswitching the value to `false` you can control how the element\nbehaves. \n\\\u003c!-- Insert your own Programmable Search Engine ID here --\\\u003e \\\u003cscript async src=\"https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga\"\\\u003e\\\u003c/script\\\u003e \\\u003c!-- Try switching the attribute value to \"true\" or \"false\" --\\\u003e \n\n \u003cdiv class=\"gcse-search\" enableAutoComplete=\"true\"\u003e\u003c/div\u003e\n\nNote: Newly enabled or added autocompletions may take several hours to appear.\n\nThere are many more options available. You can read about other search box\ncustomization options in\n[Programmable Search Element Control API](/custom-search/docs/element#supported_attributes) section.\n\nFor more information on Autocompletions, please see the [Help Center article](https://support.google.com/programmable-search/answer/2631081) on Autocomplete.\n\nNext...\n-------\n\nContinue to [Customizing search results](/custom-search/docs/tutorial/customizingresults)."]]