如何根据句子结构在输入字段中创建多个自动完成? [英] How to create multiple autocomplete in an input field based on a sentence structure?
问题描述
我的自动填充的句子结构是:
The sentence structure of my autocomplete is:
< Occupation> <对于> < time period>
示例:
- 学生5年
- 老师2年
在数据库中,我有一个包含职业列表的列。使用jQuery UI自动完成功能,我使用以下代码填充文本输入中的前两个部分:
In the database, I have a column containing a list of occupations. With jQuery UI autocomplete, I populate the first two sections in the text input using the following codes:
<script>
$(function() {
$("#occupation").autocomplete({
source: 'search.php',
delay: 500,
select: function(event, ui) {
$(this).val(ui.item.value)
}
});
});
</script>
<input type='text' name='occupation' id='occupation’>
search.php
代码:
<?php
$searchTerm = $_GET['term'];
$query = $db->query("SELECT DISTINCT occupation FROM table WHERE occupation LIKE '%" . $searchTerm . "%' ORDER BY occupation ASC");
$a_json = array();
while ($row = $query->fetch_assoc())
{
$data_row["value"] = $row['occupation'] . ' for';
$data_row["label"] = $row['occupation'];
array_push($a_json, $data_row);
}
echo json_encode($a_json);
现在,有没有办法创建第二个触发器来为其余触发器自动完成?就像选择职业一样,如果用户输入 5
,它将显示该时间段的以下自动填充选项: 5天/ 5周/ 5个月/ 5年
。如下图所示:
Now, is there any way to create a second trigger to make an autocomplete for the rest? Like after selecting an occupation, if the user inputs 5
, it’ll show the following autocomplete options for the time period: 5 days/ 5 weeks/ 5 months/ 5 years
. Like the image below:
提前感谢您的建议。
推荐答案
我建议按照此处显示的多个示例进行操作: http: //jqueryui.com/autocomplete/#multiple
I would advise following the Multiple example shown here: http://jqueryui.com/autocomplete/#multiple
基本上,我们将选择使用for
作为分隔符,而不是,
。
Basically, we're going to selectively pick out tags to fill in, using " for"
as your delimiter instead of ","
.
var occupations = [{
value: "Assistant for",
label: "Assistant"
}, {
value: "Student for",
label: "Student"
}, {
value: "Teacher for",
label: "Teacher"
}];
var oLength = [
"Days",
"Weeks",
"Months",
"Years"
];
$(function() {
function split(val) {
return val.split(/\sfor/);
}
function extractLast(term) {
return split(term).pop();
}
$("#occupation").on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = extractLast(request.term);
var results = [];
if (request.term.indexOf("for") > 0) {
var regE = /^(.*)\sfor\s(\d)\s(.*)$/
if (regE.test(request.term)) {
return false;
}
if (parseInt(term) > 0) {
$.each(oLength, function(k, v) {
results.push(term + " " + v);
});
}
} else {
results = $.ui.autocomplete.filter(
occupations, request.term);
}
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
terms[0] = terms[0] + " for";
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="occupation" />
这篇关于如何根据句子结构在输入字段中创建多个自动完成?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!