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）是我想出來的。 –