一次搜索输入多个名字
one search input multiple names
所以我在一个网站上工作,你有一个搜索栏,你可以搜索多个网站,比如 google、亚马逊、youtube 等等。我的问题是,所有这些都是一种形式,我不能使用 name="q",它在亚马逊和维基百科上搜索最多 api,因为有名字 k (亚马逊)和搜索(维基百科)。有谁知道如何更改两个按钮的输入名称?
这是 link:https://multi-search.bss.design/
<form target="_blank">
<input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>
例如您可以:
1. 添加隐藏字段
<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">
并同步然后使用 JS 代码:
const updateHiddenFields = (evt) => {
document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value
};
2. 单击按钮时重命名字段:
document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');
(将 id="button-amazon"
添加到亚马逊按钮以使其正常工作。)
您可以简单地在每个代表相应 name
属性(默认为 q
)的按钮上存储一个 data-
属性,并在单击时动态更改它。
例如:
<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
submitButton.addEventListener('click', function(e) {
document.querySelector('[data-input-search]').setAttribute('name',
this.getAttribute('data-search-input-name') || 'q');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-search class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span>Google</button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span>YouTube</button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span>Translate</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span>Images</button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span>Netflix</button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>
注意:只有 Wikipedia 按钮在这里可用,因为 Google/Amazon 阻止来自 iframe 的按钮,但您可以测试 Wikipedia。
所以我在一个网站上工作,你有一个搜索栏,你可以搜索多个网站,比如 google、亚马逊、youtube 等等。我的问题是,所有这些都是一种形式,我不能使用 name="q",它在亚马逊和维基百科上搜索最多 api,因为有名字 k (亚马逊)和搜索(维基百科)。有谁知道如何更改两个按钮的输入名称?
这是 link:https://multi-search.bss.design/
<form target="_blank">
<input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>
例如您可以:
1. 添加隐藏字段
<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">
并同步然后使用 JS 代码:
const updateHiddenFields = (evt) => {
document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value
};
2. 单击按钮时重命名字段:
document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');
(将 id="button-amazon"
添加到亚马逊按钮以使其正常工作。)
您可以简单地在每个代表相应 name
属性(默认为 q
)的按钮上存储一个 data-
属性,并在单击时动态更改它。
例如:
<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
submitButton.addEventListener('click', function(e) {
document.querySelector('[data-input-search]').setAttribute('name',
this.getAttribute('data-search-input-name') || 'q');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-search class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span>Google</button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span>YouTube</button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span>Translate</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span>Images</button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span>Netflix</button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>
注意:只有 Wikipedia 按钮在这里可用,因为 Google/Amazon 阻止来自 iframe 的按钮,但您可以测试 Wikipedia。