JavaScript函数设置了表单输入字段的值,但是该值消失了

发布于 2025-02-11 20:09:13 字数 3369 浏览 1 评论 0 原文

我正在尝试使用具有表单输入字段的AJAX进行实时数据库搜索。 整个过程都运行到了,我可以从提出的列表中选择文本。 还解决了相应的事件“ LivesearchSelect”,设置了输入字段的值。不幸的是,表格中缺少设定值。 我不知道发生了什么事,有人可以向我提出一些暗示吗?

ScreenShot

<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>

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

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>';

    }
}

I'm trying to do a live database search using ajax with a form input field.
The whole thing runs so far that i can select a text from the proposed list.
The corresponding event "livesearchSelect" is also addressed, the value of the input field is set. Unfortunately the set value is missing in the form.
I have no clue what is going on, someone can throw some hints at me pls ?

screenshot

the form with filled search and proposed list

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 controller:

<?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>';

    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

债姬 2025-02-18 20:09:13

单击 即使在空白时,will ,这是您在这里看到的。

一种解决方案是防止链接的默认操作(例如,在处理程序中返回 false 或调用 event.preventdefault ),但是更好的设计是替换&lt; a&gt; 具有更合适的内容的元素(实际上不是链接)。鉴于消费者期望&lt; li&gt; 的序列,最简单的解决方案是用&lt; li&gt替换PHP控制器中&lt; a&gt; ; 。结果仍然比所需的耦合程度更高。 HTML类和单击处理程序将结果紧密地融合到特定的搜索表格,而不是将资源表示为自己的事物。

并不是文本不是HTML元素的dom-standard属性;您应该使用 textContent >而是。

Clicking an anchor element with an href attribute, even when blank, will load the linked page, which is what you see happening here.

One solution would be to prevent the default action for the link (by e.g. returning false in the handler or calling Event.preventDefault), but a better design would be to replace the <a> elements (which aren't actually links) with something more semantically appropriate. Given that the consumer expects a sequence of <li>, the simplest solution is to replace the <a> in the PHP controller with <li>. The result would still have a higher degree of coupling than is desirable; the HTML classes and click handler couple the results tightly to the specific search form, rather than representing the resource as its own thing.

Not that text is not a DOM-standard property of HTML elements; you should be using textContent or innerText instead.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文