0

我有以下使用tomtom的简单代码，它有效：

        <!DOCTYPE html>
    <html class='use-all-space'>
    <head>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>Maps SDK for Web - Search with autocomplete</title>

    <meta name='viewport'
        content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no' />

<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.58.0/maps/maps.css'>
<link rel='stylesheet' type='text/css'
    href='../assets/ui-library/index.css' />
<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.0//SearchBox.css' />

<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2/SearchBox.css'>
<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.59.1/maps/css-styles/traffic-incidents.css' />
<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.59.1/maps/css-styles/routing.css' />
<link rel='stylesheet' type='text/css'
    href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.59.1/maps/css-styles/poi.css' />
</head>
<body>
    <script
        src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js"></script>
    <script
        src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2/SearchBox-web.js"></script>
    <script
        src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.59.1/services/services-web.min.js"></script>
    <script
        src='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.0//SearchBox-web.js'></script>
    <script type='text/javascript'
        src='../assets/js/search-markers/search-marker.js'></script>
    <script type='text/javascript'
        src='../assets/js/search/search-results-parser.js'></script>
    <script type='text/javascript'
        src='../assets/js/search-markers/search-markers-manager.js'></script>
    <script type='text/javascript' src='../assets/js/info-hint.js'></script>
    <script type='text/javascript' src='../assets/js/mobile-or-tablet.js'></script>
    <script type='text/javascript'
        src='../assets/js/search/results-manager.js'></script>
    <script type='text/javascript' src='../assets/js/search/side-panel.js'></script>
    <script type='text/javascript' src='../assets/js/search/dom-helpers.js'></script>
    <script type='text/javascript' src='../assets/js/formatters.js'></script>
    <form id="myForm" onsubmit="myFunction()">
<input id="myId" type="text"></input>
<input id="myid2" type="submit"></input>
</form>
    
    <script>
    function myFunction(){
         var query1 = document.getElementById("myId").value;

        tt.setProductInfo('My Application', '1.0');
        
        function callbackFn(result) {

            alert(result.results[0].position.lat);
        };

        tt.services.fuzzySearch({
            key : 'MyKey',
            query : query1
        }).go().then(callbackFn);
    }
    </script>
</body>
</html>

现在，我想typeahead向它添加选项。但我不知道该怎么做。我已经看到了一些自动完成选项的例子，比如这里的例子，但它们是非常复杂的代码（我什至尝试过，但我无法让它运行）。我根本不需要在我的代码中添加任何地图。我只有一个输入字段，我想在那里有一个自动完成选项，以便向用户显示有关地点名称的建议。有什么直接的方法吗？

如果有人可以帮助我，我将不胜感激。

4

1 回答 1

0 
<!DOCTYPE html>
    <html>
    <body>

    <h1>The form autocomplete attribute</h1>

    <p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
    <p>Then, try to set autocomplete to "off".</p>

    <form action="/action_page.php" method="get" autocomplete="on">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><be>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br><be>
    <input type="submit">
    </form>

    <p><b>Note:</b> The autocomplete attribute of the form element is not supported in     Opera 12 and earlier versions.</p>

    </body>
    </html>
于 2020-08-23T08:45:58.673 回答