Php 如何将已经在工作的jquery ajax post请求重用到自动完成功能中？

我有一个链接“Show cities”（显示城市），当单击时，它会显示一些城市的模式：

<a class="city" id="showCities" 
 data-toggle="modal" data-target="#modal2" href=""> Show cities</a>

但应该发生的是城市专栏所在的会议 纽卡斯尔是否出现在会议部

自动完成控制器：

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.'%')->get();

        $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);
    }
}

自动完成Jquery：

$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
    this._super();
    this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
    var that = this,
    currentCategory = "";
    $.each( items, function( index, item ) {
        var li;
        if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category bg bg-light-gray2 h6 font-weight-bold text-heading-blue'>"
            + item.category + "</li>" );
            currentCategory = item.category;
        }
        li = that._renderItemData( ul, item );
        if ( item.category ) {
        li.attr( "aria-label", item.category + " : " + item.label );
        }
    });
    }
});

$("#search").catcomplete({
    source: "{{ URL::to('autocomplete-search') }}",
    select: function(event, ui) {
    window.location.href = ui.item.url;
}

$.widget（“custom.catcomplete”，$.ui.autocomplete{
_创建：函数（）{
这个；
this.widget（）菜单（“选项”，“项目”，“>：非（.ui自动完成类别）”）；
},
_renderMenu：功能（ul，项目）{
var=这个，
currentCategory=“”；
$。每个（项目、功能（索引、项目）{
李华；
如果（item.category！=当前类别）{
附加（
）
+item.category+“
”；
currentCategory=item.category；
}
li=该值。_renderItemData（ul，项目）；
if（item.category）{
li.attr（“aria标签”，item.category+”：“+item.label）；
}
});
}
});
$（“#搜索”）.catcomplete({
来源：“{{URL:：to（'autocomplete-search'）}}”，
选择：功能（事件、用户界面）{
window.location.href=ui.item.url；
}

单击“显示花旗”时显示的模式：

<div class="modal fade bd-example-modal-lg" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="modal-list row">
                    @foreach($cities as $city)
                    <li class="col-lg-4 col-md-6 col-sm-12">
                        <a  class="" name="city" id="{{$city}}">{{$city}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

@foreach（$cities作为$city）

{{$city}

@endforeach

div#conferences“显示会议结果：

<div class="row" id="conferences">
    @foreach(conferences as $conference)
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
        <img class="card-img-top" src="{{$conference->image}}" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title h6 font-weight-bold text-heading-blue">{{$conference->name}}</h5>
            <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> {{$conference->place}},
                {{$conference->city}}</p>
        </div>
    </div>
    @endforeach
</div>

@foreach（会议作为$conference）
image}“alt=”卡片图像帽“>
{{$conference->name}
{{$conference->place}，
{{$conference->city}
@endforeach

jQuery ajax请求：

$("a[name='city']").on('click', function(){

    $('#showCities').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');

        var city = $(this).attr("id");

        $.ajax({

        url: '{{ route('city.conferences',null) }}/' + city,
        type: 'GET',
        success:function(result){
        console.log(result)

        $('#conferences').empty();
        var newConferences='';
        var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
        $.each(result, function(index, conference) {
        $('#modal2').modal('hide');
        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-body">\n' +
                '      <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
                '      <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.city+'</p>\n' +
                '     </div>\n' +
            '   </div>\n';
        });
        $('#conferences').html(newConferences);

        },
        error: function(error) {

        console.log(error.status)
        }
    });
});

$（[name='city']）。在（'click'，function（）上{
$（'#showcity'）.html（$（this.text（）+''）；
var city=$（this.attr（“id”）；
$.ajax({
url:{{route（'city.conferences'，null）}/'+city，
键入：“GET”，
成功：功能（结果）{
console.log（结果）
$（“#会议”）.empty（）；
var=''；
var占位符=“{route（'conferences.show'，['id'=>'1'，'slug'=>'demo slug']）}”；
$。每个（结果、功能（索引、会议）{
$（'#modal2'）.modal（'hide'）；
var url=placeholder.replace（1，conference.id）.replace（'demo-slug'，conference.slug）；
newConferences+='\n'+
“\n”+
''+会议名称+'\n'+
“
”+conference.city+”
\n+
“\n”+
“\n”；
});
$（'#conferences'）.html（newConferences）；
},
错误：函数（错误）{
console.log（error.status）
}
});
});

一个选项是使用数据属性。另外，根据AJAX请求的工作方式，您可能不希望使用城市名称作为ID；尤其是在请求中返回多个同名城市的情况下（ID将发生冲突并产生意外结果）

谢谢，但该部分已经在处理问题代码“jQuery ajax request”。我的疑问是如何将该代码重新用于自动完成功能。因为在单击城市的自动完成中，用户被重定向到“”会议分区中会出现城市等于单击城市而不是结果的会议。问题应该是因为这里“$（“#搜索”）.catcomplete（{source:{URL:：to（'autocomplete-search'）}”，选择：function（event，ui）{window.location.href=ui.item.URL；}）；“用户被重定向到”项目测试/会议/地点/城市/纽卡斯尔“何时城市”纽卡斯尔“已单击，但不应将用户重定向到该页面，而应将ajax请求发送到该url。只有在自动完成输入中单击会议名称时，用户才应重定向到会议详细信息页面，这样做很好，仅当单击城市时才出现问题。\ u renderItemData（ul，item）；

？您能显示该代码吗？本质上，绘制您遇到问题的链接的代码在哪里？它显然不在模式中，对吗？renderItemData来自jquery ui插件。而链接就是在该部分呈现的。

$("a[name='city']").on('click', function(){

    $('#showCities').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');

        var city = $(this).attr("id");

        $.ajax({

        url: '{{ route('city.conferences',null) }}/' + city,
        type: 'GET',
        success:function(result){
        console.log(result)

        $('#conferences').empty();
        var newConferences='';
        var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
        $.each(result, function(index, conference) {
        $('#modal2').modal('hide');
        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-body">\n' +
                '      <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
                '      <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.city+'</p>\n' +
                '     </div>\n' +
            '   </div>\n';
        });
        $('#conferences').html(newConferences);

        },
        error: function(error) {

        console.log(error.status)
        }
    });
});

<div class="modal fade bd-example-modal-lg" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="modal-list row" id="cities-list>
                    @foreach($cities as $city)
                    <li class="col-lg-4 col-md-6 col-sm-12">
                        <a class="" data-city-name="{{city}}" name="city" id="{{$city}}">{{$city}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

$('#cities-list li a').on('click', function() {
    // push city name to #conferences div
    $('#conferences').append($('<p />').text($(this).attr('data-city-name')));
});