JavaScript函数设置了表单输入字段的值,但是该值消失了
我正在尝试使用具有表单输入字段的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>';
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
单击
即使在空白时,will
,这是您在这里看到的。
一种解决方案是防止链接的默认操作(例如,在处理程序中返回
false
或调用event.preventdefault
),但是更好的设计是替换&lt; a&gt;
具有更合适的内容的元素(实际上不是链接)。鉴于消费者期望&lt; li&gt;
的序列,最简单的解决方案是用&lt; li&gt替换PHP控制器中
。结果仍然比所需的耦合程度更高。 HTML类和单击处理程序将结果紧密地融合到特定的搜索表格,而不是将资源表示为自己的事物。&lt; a&gt;
;并不是
文本
不是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 callingEvent.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 usingtextContent
orinnerText
instead.