jquery 将Ajax搜索结果绑定到TextField

icnyk63a 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(105)

我使用Ajax实现的搜索功能按预期工作，我面临的问题是，当我单击搜索结果中的一个项目时，我找不到将搜索结果绑定到文本字段的解决方案。
Ajax搜索结果使用resultBox显示，用于搜索的输入文本字段是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)
})

}

字符串
请告知正确的方法

jquery

来源：https://stackoverflow.com/questions/77357491/binding-ajax-search-result-to-textfield

1条答案

按热度按时间

zujrkrfu1#

你需要在锚标签上添加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)
    })
    
    }

字符串

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 将Ajax搜索结果绑定到TextField

1条答案

相关问题

热门标签

最新问答