在div中显示搜索关键字并在页面加载时显示该div

Question

我必须实现两件事。 1）我的页面上有一个搜索框。在这里我可以输入要搜索的文本。我想在div中显示搜索词或关键字。像这样的东西

现在我正在文本框中显示。如何在div中显示？

function showDiv() {
                document.getElementById('searchtermdiv').style.display = "";
 }

<div>
     <div >
           @Html.TextBox("searchTerm", "", new { placeholder ="Search..." })
      </div>
      <div style="float:right;">
           <button type="submit" onclick="showDiv()">Go</button>
       </div>

</div>

<div id="searchtermdiv">
    <strong>You searched for "@Html.TextBox("searchTerm", "", new { @class = "searchcontext" })"</strong>
</div>

2）我需要显示div页面加载。目前，div在单击按钮时显示，但在页面加载时消失。

Answer 1

您应使用div或span之类的占位符元素，并通过读取输入的当前值来使用JavaScript更新该内容。

<div id="searchtermdiv">
    <strong>You searched for "<span id="searchterm"></span>"</strong>
</div>

和

function showDiv()
{
    var v = document.getElementById('searchTerm').value;
    document.getElementById('searchterm').innerText = v;
}

要使此事件在页面加载时发生，请在onload事件上调用相同的方法

window.onload = function ()
{
    showDiv();
}

如果要在不显示搜索文本时隐藏整个预览元素，则可以根据输入的搜索文本的值有条件地更新该元素的可见性。

function showDiv()
{
    var v = document.getElementById('searchTerm').value;
    document.getElementById('searchterm').innerText = v;
    if (v)
    {
        document.getElementById("searchtermdiv").style.visibility = "visible";
    }
    else
    {
        document.getElementById("searchtermdiv").style.visibility = "hidden";
    }
}

或

如果您在GET操作方法中使用的值为ViewBag.searchTerm，并希望在预览元素中显示该值，则在呈现预览元素标记时可以使用相同的值

<span id="searchterm">@ViewBag.searchTerm</span>

有了这个方法，您不需要在onload事件上进行客户端方法调用

Answer 2

function showDiv() {
   document.getElementById('searchTermDiv').innerHTML=        
   "You search for : " + document.getElementById('searchTerm').value;
 }

<div>
    <div id='searchTermDiv'> </div>
     <div>
           @Html.TextBox("searchTerm", "", new { placeholder ="Search..." })
      </div>
      <div style="float:right;">
           <button type="submit" onclick="showDiv()">Go</button>
       </div>

</div>

使用此选项，如果您搜索“热门主题”，此div将添加文本为 “ 您搜索的是：热门话题”