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

Question

在下面的代码中发生了两件事......当按下回车键时，它不会提交当我手动单击图标来启动 onclick 时，它会更改 url，但不会加载 url。

    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 并仅使用常规表单提交。