自动完成搜索输入(无法加载https://proj.test/autocomplete-search?term = tes:否'Access-Control-Allow-Origin)

时间:2018-07-31 23:05:42

标签: php jquery laravel

我有一个自动完成输入,当用户输入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);
    }
}

0 个答案:

没有答案