JavaScript中的链接URL_Javascript_Html

JavaScript中的链接URL

javascript html

JavaScript中的链接URL,javascript,html,Javascript,Html,我昨天创建了一个带有功能搜索栏的网站。但我的问题是，我用JavaScript编写了它，我不知道如何在点击按钮上链接URL。是我的网站，请查看“搜索目的地”搜索框，了解我的意思。以下是我的JavaScript代码： const ac = document.querySelector('.autocomplete'); M.Autocomplete.init(ac, { data: { "Aruba": null, "Canc

我昨天创建了一个带有功能搜索栏的网站。但我的问题是，我用JavaScript编写了它，我不知道如何在点击按钮上链接URL。是我的网站，请查看“搜索目的地”搜索框，了解我的意思。以下是我的JavaScript代码：

const ac = document.querySelector('.autocomplete');

M.Autocomplete.init(ac, {

    data: {
        "Aruba": null,
        "Cancun Mexico": null,
        "Hawaii": null,
        "Florida": null,
        "California": null,
        "Jamacia": null,
        "Europe": null,
        "Bahamas": null,
        "Nova Scotia": null,
        "Rialto": null,
    }
});

我用ECSS框架制作了这个网站

<!-- Section: Search -->
<section id="search" class="section section-search teal darken-1 white-text center scrollspy">
    <div class="container">
        <div class="row">
            <div class="col s12">
                <h3>Search Destinations</h3>
                <div class="input-field">
                    <input class="white grey-text autocomplete" placeholder="Aruba, Cancun, etc..." type="text" id="autocomplete-input">
                </div>
            </div>
        </div>
    </div>
</section>


搜索目的地

这是我的HTML代码，答案如下：

<!DOCTYPE html>
<html>
<body>

<input id="age">
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction(a) {
a = document.getElementById("age").value;
if (a == "Aruba") {window.open("your link")}
else if (a == "Another country") {window.open("your link")}}
</script>


试试看

函数myFunction（a）{
a=document.getElementById（“年龄”）.value；
如果（a==“Aruba”）{window.open（“您的链接”）}
如果（a==“其他国家”）{window.open（“您的链接”）}

这很有效

您可以尝试将onclick函数添加到MaterializeCSS创建的列表中（class.autocomplete content）

然后，您可以使用event.target获取单击的目标，然后您可以访问其属性

比如说

文档
.querySelector（“自动完成内容”）
.addEventListener(
“点击”，
e=>{
var项目=e.target
//每次单击时要做什么
log（item.innerHTML）
}
)

直接在您的网站上测试，它为我提供了墨西哥坎昆

[编辑]更完整的示例让您的站点重定向到页面的https://apex-lang.github.io/cancun'当点击坎昆和去'https://apex-lang.github.io/aruba“在阿鲁巴时：

//首先声明一个词汇表，其中key=项的text，value=url
变量重定向={
“阿鲁巴”：https://apex-lang.github.io/aruba",
“墨西哥坎昆”：https://apex-lang.github.io/cancun"
//在此处添加所有项目
//确保文本与自动完成列表中的文本完全相同
}
文件
.querySelector（“自动完成内容”）
.addEventListener(
“点击”，
e=>{
var项目=e.target
var destination=item.innerText
//仅获取不带标记的可见文本
window.location=redirections[destination]//将页面重定向到URL
}
)

请您的问题添加更多代码。您是否尝试过使用

标记？异端猴子，我尝试过，但它在JavaScrcipt中不起作用？呃，先生，我真的不明白您的意思。您能更好地解释一下吗？如果您希望您的网站在单击列表中的某个项目后立即执行操作，您需要在

//每次单击时要执行的操作。但更好的解决方案是在输入端添加一个按钮，然后根据document.querySelector（'.autocomplete'）让按钮在单击时重定向用户。value
我不需要搜索引擎，我只想在单击任何位置时，转到我链接的URL基本上你想这样吗？例如，如果我写“Aruba”，那么它链接到一个页面？如果你写，例如“Aruba”，然后点击它，它链接到一个页面我编辑了我以前的答案（你必须去写“这是答案：”）的地方