感谢您的回复,@ManselUK
修复此部分的查找值(如下)
但是,当我SELECT
一个值时,它不会设置隐藏元素的值,为什么不呢?
我从autocomplete
中选择值时出现错误:Uncaught TypeError: Cannot set property 'value' of null
。。
输入5个字符时调用的Php代码:
try{
$occupation = mysql_real_escape_string($_GET['term2']); //////
echo 'term 2 '. $occupation;
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth = $dbh->prepare(
'SELECT occupID, occupVal From Occupation WHERE occupVal = ?');
$sth->bindParam(1, $occupation);
$sth->execute();
$jsonArray = array();
while ($result = $sth->fetch(PDO::FETCH_ASSOC)) {
$jsonArray[] = array(
'label' => $result['occupVal'],
'value' => $result['occupVal']."|".$result['occupID']);
}
print json_encode($jsonArray); // json encode that array
} // try
catch{}
代码块将向文件发送错误,但该文件中没有错误。
HTML表单输入:
<label for="occup">What is your occupation? <br /></label>
<div class="ui-widget">
<input id="occup" type="text" name="term2" value="e.g. Carpenter, Developer, etc" onFocus="clearText(this)" /><br />
<input type="hidden" id="actualOccup" name="actualOccupval" value="" />
输入东西时调用的JS:
<script type="text/javascript">
$(document).ready(function()
{
// Zipcode Field
$('input#zip').autocomplete({
dataType: "json",
source: "../src/php/registration/getFanLoc.php",
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var cityAndState= joinedValues.split("|")[1];
document.getElementById('actualZip').value = cityAndState ;
document.getElementById('zip').value = id;
}
});
// Occupation Field
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
},
minLength: 5,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccupval').val(occupValAndId);
$('#occup').val(id);
}
});
});
</script>
我尝试过调试:-请检查此文件的错误日志。(没有错误)-检查SELECT
查询,数据库中occupVal
的值是VARCHAR,在SQL
中,值是通过执行occupVal = 'some val here';
找到的,jQuery需要这些引号吗?-如果我直接访问getFanOccupation.php?term2=Computer Programmer
,它会输出:term 2 Computer Programmer[{"label":"Computer Programmer","value":"Computer Programmer|183"}]
-哪一个是正确的,问题是如果我得到Computer Programmer
值并直接粘贴到输入中,甚至开始写它
修复了JS:-此代码有效,是为职业选择了错误的ID,这就是为什么它没有显示隐藏的表单字段值
$(document).ready(function()
{
// Zipcode Field
$('input#zip').autocomplete({
dataType: "json",
source: "file1.php",
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var cityAndState= joinedValues.split("|")[1];
document.getElementById('actualZip').value = cityAndState ;
document.getElementById('zip').value = id;
}
});
// Occupation Field
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("file.php", { term2: request.term }, response);
},
minLength: 5,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccup').val(occupValAndId);
$('#occup').val(id);
}
});
});
使用此:
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
}
在第二CCD_ 12上。$.getJSON()的文档
来自文档:
一个请求对象,具有一个名为"term"的属性,该属性引用设置为当前文本输入中的值。例如,当用户在城市字段中输入"new yo",则自动完成项将等于"新哟"。
完整代码:
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
},
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccupval').val(occupValAndId);
$('#occup').val(id);
}
});
注意还将document.getElementById('blah').value =
更改为$('#blah').val()
,因为您已经在使用jQuery。。。这里的val()方法的文档