首页 > 解决方案 > laravel 和 jquery 中的自动完成搜索框问题

问题描述

我正在使用 laravel 和 jquery 制作自动完成搜索框,但它无法正常工作,并且在$( "#keyword" ).autocomplete({response( data );

我不知道为什么会发生这种情况,而且它也没有创建响应下拉

Uncaught TypeError: Cannot read property 'element' of undefined

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function(){
    $("#keyword").keypress(function(){
        $( "#keyword" ).autocomplete({
            source: function( request, response ) {
            $.ajax({
                url:"{{route('translations.get_translation_data')}}",
                type: 'post',
                dataType: "json",
                data: {
                    _token: CSRF_TOKEN,
                    search: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        },
        select: function (event, ui) {
            $('#keyword').val(ui.item.en_text); // display the selected text
                return false;
            }
        });
    });
});

<script src="https://code.jquery.com/jquery-2.1.4.js"
  integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.9.0/jquery.raty.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css" rel="Stylesheet"></link>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<input type="text" name="keyword" id="keyword" placeholder="Quick Search" value=""/>


Route::post('/translations/get_translation_data', 'Admin\TranslationController@get_translation_data')->name('translations.get_translation_data');
function get_translation_data(Translation $translation,Request $request){
    $search = $request->search;

    $language = Session::get('language');
    $lang_id = $language['id'];//$request->input('lang');
    $translations = $translation;
    if($lang_id!=''){
        $translations = $translations->with('language')->where("language_id",$lang_id);
    }

    $en_translations = $translation->where("language_id",1)->get();
    if(!empty($search)){
        $en_translations = $translation->orderby('en_text','asc')->select('en_text')->where('en_text', 'like', '%' .$search . '%')->get();
    }else{
        $en_translations = $translation->orderby('en_text','asc')->select('en_text')->get();
    }
    return $en_translations;
    //it is giving result like 
    //[{"en_text":"Abc"},{"en_text":"Allot"}]
}

有人可以帮我吗?

标签: htmljquerylaravel

解决方案


推荐阅读