我有一个自动完成输入,当用户输入3个字母时,应显示与3个字母匹配的会议名称或与3个字母匹配的城市名称。
但是它出现错误:(索引):1无法加载https://proj.test/autocomplete-search?term=tes:在请求的资源上没有'Access-Control-Allow-Origin'标头。因此,不允许访问来源“ http://proj.test”。
您知道可能是什么问题吗?
自动完成jQuery:
$("#search").catcomplete({
source: "{{ URL::to('autocomplete-search') }}",
minLength: 3,
select: function(event, ui) {
if(ui.item.category=="Conferences"){
window.location.href = ui.item.url;
}
else{
$.get(ui.item.url, function(result) {
var newConferences = '';
let imageUrl = ! conference.image ? '/img/5.png' : conference.image;
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card box-shaddow">\n' +
' <img class="card-img-top" src='+ imageUrl +' alt="Card image cap">\n' +
' <div class="card-body">\n' +
' <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i> '+conference.start_date+'</p>\n' +
' <h5 class="card-title">'+conference.name+'</h5>\n' +
' <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>\n' +
' </div>\n' +
' <div class="card-footer d-flex justify-content-between align-items-center">\n' +
' <a href="' + url + '" class="btn btn-primary text-white">More</a>' +
' <span> Free</span>\n'+
' </div>\n' +
' </div></div>';
});
// add the HTML to the #conferences div
$('#conferences').html(newConferences);
}, 'json');
}
}
});
AutocompleteController:
class AutocompleteController extends Controller
{
public function index(){
return view('autocomplete.index');
}
public function search(Request $request){
$search = $request->term;
$conferences = Conference::where('name', 'LIKE', '%'.$search.'%')->get();
$cities = Conference::where('city', 'LIKE', '%'.$search.'%')-> distinct()->get(['city']);
$data= [];
foreach ($conferences as $key => $value){
$data[] = ['category'=> 'Conferences', 'value' => $value->name, 'url' => 'conference/'.$value->id.'/'.$value->slug];
}
foreach ($cities as $key => $value){
$data[] = ['category'=> 'Cities', 'value' => $value->city, 'url' => 'conferences/where/city/'.$value->city];
}
return response($data);
}
}