1
我越来越有devbridge autocomplete麻烦在我的形式devbridge自动完成查询AJAX实现
我头部分:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/autocomplete/jquery.autocomplete.min.js"></script>
输入字段页面看起来是这样的:
<script>
$('#client_recommendation').autocomplete({
serviceUrl: '/autocomplete/ClientRecommendation.php',
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
</script>
<form action="/scripts/add_client.php" method="post" name="add_client">
<fieldset>
<label for="client_recommendation">Recommendation:</label>
<input name="client_recommendation" size="25" type="text" id="client_recommendation" />
</fieldset>
</form>
ClientRecommendation.php
require '../scripts/connect.php';
$cr = trim($_GET['client_recommendation']); //also tried trim($_GET['query']);
$sql = "SELECT client_name, client_id
FROM (
SELECT CONCAT(
client_name, ' ', client_surname, IF(
LENGTH(client_prompt),
CONCAT(' (',client_prompt,')'), '')
)
AS client_name, client_id
FROM `clients`
)
clients
WHERE client_name LIKE '%" . $cr . "%'
ORDER BY client_name";
$result = $conn->query($sql);
$reply = array();
$reply['query'] = $cr;
$reply['suggestions'] = array();
while($row = $result->fetch_assoc()) {
$reply['suggestions'][]=$row['client_name'];
}
echo json_encode($reply);
$conn->close();
作为测试我想这:
$cr = "pa";
和ClientRecommendation.php
返回正确的结果:
{"query":"pa","suggestions":["Pavlo hryhorash"]}
这是有效的JSON,但在我的形式,我什么也没得到。 任何帮助,将不胜感激
UPDATE
我加$(document).ready
到脚本的页面输入字段:
<script>
$(document).ready(function(){
$('#client_recommendation').autocomplete({
serviceUrl: '/autocomplete/ClientRecommendation.php',
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value);
}
});
});
</script>
后所生成的HTML标记的建议开始与页面加载,并在输入字段中键入时,我在控制台中看到此错误:
Uncaught SyntaxError: Unexpected token <
m.parseJSON @ jquery.min.js:4g.transformResult @
jquery.autocomplete.min.js:49(anonymous function) @
jquery.autocomplete.min.js:288j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @
jquery.min.js:4b @ jquery.min.js:4