javascript函式設定表單輸入欄位的值，但隨后該值消失了

我正在嘗試使用帶有表單輸入欄位的 ajax 進行實時資料庫搜索。到目前為止，我可以從建議的串列中選擇一個文本。相應的事件“livesearchSelect”也被處理，輸入欄位的值被設定。不幸的是，表單中缺少設定值。我不知道發生了什么，有人可以給我一些提示嗎？

截屏

html:

<form name="demoform" id="demoform" action="" method="post"  >
    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-4">
                <input type="text" name="name" id="name" value="a value"  class="form-control" >
            </div>
    </div>
    <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-4">
                <input type="text" name="email" id="email" value=""  class="form-control" >
            </div>
    </div>
    <div class="form-group row">
        <label for="search" class="col-sm-2 col-form-label">Live Search</label>
            <div class="col-sm-4">
                <input type="search" name="search" id="search" value=""  class="form-control"  oninput="livesearchResults(this, '/livesearch/Album');">
                <ul class="list-group" id="search-results" style="display:none">
                    <li class="list-group-item">?</li>
                </ul>
            </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-4">
            <input type="submit" name="submit" value="Submit" id="submit"  class="btn btn-primary" />
        </div>
    </div>
</form>

javascript:

function livesearchResults(src, dest){
    var results = document.getElementById(src.id   '-results');
    var searchVal = src.value;

    if(searchVal.length < 1){
        results.style.display='none';
        return;
    }

    var xhr = new XMLHttpRequest();
    var url = dest   '/'   searchVal;
    // open function
    xhr.open('GET', url, true);

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var text = xhr.responseText;
            results.style.display='inline';
            results.innerHTML = text;
            console.log('response from searchresults.php : '   xhr.responseText);
        }
    }

    xhr.send();
}

function livesearchSelect(src) {
    var input_element = document.getElementById(src.parentElement.id.split("-")[0]);
    input_element.defaultValue = src.text;
    input_element.value = src.text;
}

php控制器：

<?php

namespace controller;

use database\DBTable;

class livesearch extends BaseController {
    
    public function index() {
        echo "nothing here";
    }

    public function Album($input) {
        $table = new DBTable('Album');
        $results = $table->where('Title',$input.'%', 'like')->findColumnAll('Title', '', 6);

        foreach ($results as $key => $value) 
            echo '<a href=""  onclick="livesearchSelect(this);">'.$value.'</a>';

    }
}

uj5u.com熱心網友回復：

錨元素，即使具有空白href屬性，也會在單擊時加載鏈接的頁面，這就是您在此處看到的情況。

一種解決方案是阻止鏈接的默認操作（例如，通過false在處理程式中回傳或呼叫Event.preventDefault），但更好的設計是<a>用語意上更合適的元素替換元素（實際上不是鏈接）。鑒于消費者期望一個序列<li>，最簡單的解決方案是將<a>PHP 控制器中的<li>. 結果仍將具有比預期更高的耦合程度；HTML 類和單擊處理程式將結果緊密耦合到特定的搜索表單，而不是將資源表示為它自己的東西。

這text不是 HTML 元素的 DOM 標準屬性；你應該使用textContentorinnerText代替。

標籤：javascript php html 阿贾克斯 形式

上一篇：通過順序文本欄位訪問VBA-Loop，如果不為空則執行

下一篇：根據url引數設定狀態react-routerv6