提问人：Satheesh Kumar 提问时间：10/25/2023 更新时间：10/25/2023 访问量：28
将 Ajax 搜索结果绑定到 TextField
Binding Ajax Search Result To TextField
问：
我使用 Ajax 实现的搜索功能按预期工作，我面临的问题是，当我单击搜索结果中的项目时，我找不到将搜索结果绑定到文本字段的解决方案。
使用 resultBox 显示 Ajax 搜索结果，用于搜索的输入文本字段是 SearchInput。单击 resultBox 中的项后，需要将该值绑定到 searchInput。但目前，当我单击resultBox中的项目时，页面正在刷新。
console.log("Sanity check!");
const url = window.location.href
window.onload = function() {
const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-box")
const resultBox = document.getElementById("results-box")
const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value
const sendSearchData = (stock_name) =>{
$.ajax({
type: "POST",
url: '',
data:{
'csrfmiddlewaretoken' : csrf,
'stock_name':stock_name
},
success: (res) =>{
console.log(res.data)
const data = res.data
if (Array.isArray(data))
{
resultBox.innerHTML= ""
data.forEach(stock_name =>{
resultBox.innerHTML += `
<a href="" style="text-decoration : none;">
<div>
<p> ${stock_name.symbol_name} </p>
<small> ${stock_name.symbol}</small>
</div>
</a>
`
})
}
else
{
if (searchInput.value.length > 0)
{
resultBox.innerHTML =`<b>${data}</b>`
}
else
{
resultBox.classList.add('not-visible')
}
}
},
error: (err) =>{
console.log(err)
}
})
}
searchInput.addEventListener('keyup',e=>
{
console.log(e.target.value)
if (resultBox.classList.contains('not-visible')){
resultBox.classList.remove('not-visible')}
sendSearchData(e.target.value)
})
}
请就正确的方法提供建议
答：
0赞
Negi Rox
10/25/2023
#1
您需要在锚点标签上添加 onclick 函数
console.log("Sanity check!");
const url = window.location.href
window.onload = function() {
const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-box")
const resultBox = document.getElementById("results-box")
const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value
const sendSearchData = (stock_name) =>{
$.ajax({
type: "POST",
url: '',
data:{
'csrfmiddlewaretoken' : csrf,
'stock_name':stock_name
},
success: (res) =>{
console.log(res.data)
const data = res.data
if (Array.isArray(data))
{
resultBox.innerHTML= ""
data.forEach(stock_name =>{
resultBox.innerHTML += `
<a href="" style="text-decoration : none;" onclick="AddToTextBox(this)">
<div>
<p> ${stock_name.symbol_name} </p>
<small> ${stock_name.symbol}</small>
</div>
</a>
`
})
}
else
{
if (searchInput.value.length > 0)
{
resultBox.innerHTML =`<b>${data}</b>`
}
else
{
resultBox.classList.add('not-visible')
}
}
},
error: (err) =>{
console.log(err)
}
})
}
function AddToTextBox(obj)
{
event.preventDefault();
if(null!==obj)
{
var text = $(obj).text();
$("#search-box").val(text);
}
}
searchInput.addEventListener('keyup',e=>
{
console.log(e.target.value)
if (resultBox.classList.contains('not-visible')){
resultBox.classList.remove('not-visible')}
sendSearchData(e.target.value)
})
}
评论