Question

在以下代码中，发生了两件事... 按Enter时不提交当我手动单击图标以启动onclick时，它会更改网址，但不会加载该网址。

    function searchKeyPress(e)
    {
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13)
        {
            document.getElementById('btnSearch').click();
            return false;
        }
        return true;
    }
    
                function onClickHandler() {
                    var id ="WordpressEmployeeSearch"
                    var employeeSearchParams = document.getElementById('EmployeeName').value;
                    var cityStateZip = document.getElementById('CityStateZip').value;
                    window.history.pushState([id], id, `/app/?attorney=${employeeSearchParams }&location=${cityStateZip}`);
                }

    <div class="tab-area">
        <div class="tabs">
            <p class="tab employee" href="#">EMPLOYEE RATINGS</p>
            <p class="tab company" href="#">COMPANY RATINGS</p>
        </div>
        <div class="search-area">
            <div class="search-bar-area" style="">
                <div class="srch-bars">
                    <input class="home-src" id="EmployeeName" placeholder="Search by Employee's Name" />
                    <input class="state-zip" id="CityStateZip" placeholder="City, State, Zip" />
                  
                </div>
                <div class="icon" id="btnSearch" onClick="onClickHandler()">
                    <i name="Search" class="fas fa-search"></i>   
                </div>
            </div>
        </div>
    </div>

Answer 1

pushState的全部要点是它更改了URL，而没有加载新页面。

这就是您所说的：“如果当前页面使用JavaScript，则我正在修改DOM。其结果与直接访问此URL相同，因此请更新地址栏和历史记录，以便后退/前进/刷新仍然有效“。

如果要导航到新页面，请使用location = "the new url"。

更好的是，根据您要构造的URL，完全删除JavaScript，而只需使用常规表单提交即可。

搜索字段问题-输入时不提交，更改url但不加载url

1 个答案: