JavaScript设置表单输入框值后提交时值消失问题排查

问题现象 #

• 基于AJAX实现输入框数据库实时联想搜索功能，当前已完成联想列表渲染、点击选项触发livesearchSelect事件的流程
• 事件执行逻辑中已手动对输入框的defaultValue、value属性赋值，但表单提交时已设置的值消失，后端无法获取选中的搜索参数

现有实现代码 #

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;
    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="" class="list-group-item list-group-item-action" onclick="livesearchSelect(this);">'.$value.'</a>';

    }
}

故障根因 #

• 核心问题：联想列表输出的选项为<a href="">空链接，点击选项时，onclick绑定的赋值逻辑执行完成后，空链接的默认跳转行为会触发当前页面刷新，表单被重置，之前给输入框赋的值直接被清空，最终提交时自然无法获取到选中的内容。
• 交互瑕疵：选中选项后未自动隐藏联想结果列表，影响使用体验。

修复方案 #

1. 修改PHP端输出联想选项的代码，将空链接替换为无跳转行为的地址，避免触发页面刷新：

   foreach ($results as $key => $value) 
       echo '<a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="livesearchSelect(this);return false;">'.$value.'</a>';
   

   其中return false;用于额外阻止a标签的默认事件，避免异常跳转。
2. 完善livesearchSelect函数，赋值完成后自动隐藏联想结果列表：

   function livesearchSelect(src) {
       var input_element = document.getElementById(src.parentElement.id.split("-")[0]);
       input_element.defaultValue = src.text;
       input_element.value = src.text;
       // 选中后隐藏联想列表
       src.parentElement.style.display = 'none';
   }
   

内容的提问来源于stack exchange，提问作者Heriberto