如何在我的html代码中激活tomtom的自动完成选项？

问题描述

我有以下简单的代码可以使用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选项。但是我不知道该怎么做。我已经看到了一些自动完成选项的示例，例如一个here，但它们是非常复杂的代码（我什至尝试过，但无法运行）。我根本不需要在我的代码中添加任何地图。我只有一个输入字段，我希望在那里有一个自动完成选项，以便向用户显示有关地点名称的建议。有什么简单的方法吗？

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

autocomplete html javascript