9
Jquery의 Selectize 태그 라이브러리가 사용 중이며 지금까지는 잘 작동합니다.Jquery 선택 Ajax의 옵션 상단에있는 "모두 지우기"링크를 추가하십시오.
아래 코드는 제가 사용한 코드입니다.
자바 스크립트 코드 :
$('#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() 이벤트를 사용하려면, 내가 업데이트 한 내
create: 내 자바 스크립트 코드 :
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>" });
}
});
},
그러나 나는 거기에 내 추가 된 옵션을 볼 수 없습니다 나는대로 작동하지 않는 것 같습니다. 내 결과가 채워진 후 내 하이퍼 링크를 볼 수 없습니다.
나는 이미 검색 한 다음 채워진 레코드를 아래 코드와 같이 사용한다는 것을 알고 있습니다.
$('.my-hyperlink-custom-class').on('click', function() {
control.clearOptions();
});
누군가가 나를 어떻게 안내 할 수 있습니까?
귀하의 답변은 어떻게 든 제가 원하는 것을 해결하거나 구현하는 데 도움이되었습니다. 그러므로 나는 현상금 보상을주는 당신의 대답을 선택하고 있습니다. 그러나 누군가가 내가했던 곳에 똑같은 문제가 붙어있는 경우 최종 답변으로 답변을 제공했습니다. 고맙습니다. –
[Here] (https://stackoverflow.com/a/46398821/6829420)는 내가 생각해 낸 것입니다. –