9
我正在使用Jquery的Selectize标记库，它对我来说目前效果很好。Jquery Selectize在Ajax选项的顶部添加“全部清除”链接
下面是我用过的代码。
JavaScript代码：
$('#q').selectize({
plugins: ['remove_button'],
valueField: 'address',
labelField: 'address',
searchField: 'address',
create: true,
render: {
item: function(data, escape) {
return '<div>' + escape(data.address) + '</div>';
}
},
onChange: function(value) {
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: base_url + '/search-property-autocomplete',
type: 'POST',
dataType: 'json',
data: {
q: query,
},
error: function() {
callback();
},
success: function(res) {
console.log(res.properties);
callback(res.properties);
}
});
}
});
PHP代码：
/* API for autocomplete list of properties */
Route::post('/search-property-autocomplete', function() {
if (!empty(trim($_POST['q']))) {
$search_term = trim($_POST['q']);
// getting Suburb State and Postcode of the properties based on search
$query = Property::join('technobrave_suburbs_', function($join) {
$join->on('technobrave_properties_.suburb_id', '=', 'technobrave_suburbs_.id');
});
$query->join('technobrave_states_', function($join) {
$join->on('technobrave_properties_.state_id', '=', 'technobrave_states_.id');
});
$query->select('technobrave_properties_.*', 'technobrave_suburbs_.suburb', 'technobrave_states_.state_name');
$query->where(function($query) use ($search_term) {
$query->where('technobrave_properties_.post_code', 'LIKE', '%' . $search_term . '%');
$query->orwhere('technobrave_suburbs_.suburb', 'LIKE', '%' . $search_term . '%');
$query->orwhere('technobrave_states_.state_name', 'LIKE', '%' . $search_term . '%');
});
$data = $query->take(8)->get(); // getting maximum 8 records only
if ($data) {
foreach ($data as $current_record) {
$result[] = array(
'address' => $current_record->suburb . ' ' . $current_record->state_name . ' ' . $current_record->post_code
);
}
}
} else {
$result = [];
}
echo json_encode(array('properties' => $result));
});
正如你可以看到在上面的代码中，我使用Ajax来填充数据，并通过调用我的PHP越来越记录功能工作得很好。
现在，我想在我的所有结果顶部添加一个项目作为超链接，如全部清除每当我搜索或输入我的输入框时都会出现。
如果我点击清除全部链接，应该清除下面附加的结果。
要使用由Selectize提供的clearoptions()事件，我已经更新了我的符合我的JavaScript代码：
create: function(input, callback) {
$.ajax({
url: base_url + '/search-property-autocomplete',
type: 'POST',
dataType: 'json',
data: {
q: query,
},
error: function() {
callback();
},
success: function(res) {
return callback({ address: "<a href='javascript:void(0)'>Clear All</a>" });
}
});
},
但它似乎没有工作，因为我看不到我的添加选项那里。填充结果后，我无法看到我的超链接。
我已经知道使用下面的somethink代码会在我搜索后删除我填充的记录。
$('.my-hyperlink-custom-class').on('click', function() {
control.clearOptions();
});
但我坚持追加或推新的项目，以我的代码与我填充使用Ajax的结果。
有人可以指导我如何实现这一目标。
你的答案以某种方式帮助我解决或实现我想要的。因此我选择你的答案给予赏金奖励。但是，如果有人坚持同样的问题，我提供了我的答案作为最终的代码。谢谢。 –
[这里]（https://stackoverflow.com/a/46398821/6829420）是我想出来的。 –