jqueryオートコンプリートでjsonエラーが返される

Question

私はsearch_putをオートコンプリートするためにjson配列をサーバーから取得するためにkeyup関数を呼び出しています。これは私が初めてそれをやっているときにうまく動作します。しかし、私がオートコンプリートを使用すると、新しいデータで同じビューを読み込み、同じ手順をやり直そうとすると、エラーが発生します。私はすでに$（document）.ajaxSuccess（function（）{}）で修正しようとしました。私の.ready関数に追加しても動作しません。他のイベントハンドラーの中でイベントハンドラーを使用することはできないと私は指摘しましたが、私が最初にうまくいきました。私はエラーについて読んで、それは私がJSsonを2回解析することを意味することを発見した。しかし、それが正しければそれは初めてではないでしょうか？誰かが助けることを願っています。

jQueryのこの経路を呼び出す

/** 
* for searching the uni 
*/ 
$("#keyworduni").keyup(function(){ 
    var keyword = $("#keyworduni").val(); 
    $.get("searchuni", { search: keyword }) 
     .done(function(data) { 

      $('#resultsuni').show(); 

      $('#resultsuni').html(''); 

      var results = jQuery.parseJSON(data); 

      $(results).each(function(key, value) { 
       $('#resultsuni').append('<div class="itemuni">' + value + '</div>'); 
      }); 
      console.log(data); 

      $('.itemuni').click(function() { 
       var text = $(this).html(); 
       $('#keyworduni').val(text); 
      }); 

      if($('#keyworduni').val() == ''){ 
       $('#resultsuni').hide(); 
      } 

     }); 
}); 

：

Route::get('/searchuni', [ 
'uses' => 'UniController@searchUni', 
'as' => 'user.searchuni' 

]）。私UniController内

：

/** 
* get the data from db from keyword for uni 
*/ 
public function searchUni(Request $request){ 

    if($request->ajax()) { 

     $keyword = $request->search; 

     //query user model 
     $unis = DB::table('unis')->where([ 
      ['name', 'LIKE', '%' .$keyword. '%'], 
     ])->limit(3)->get(); 

     $json = array(); 

     foreach ($unis as $uni) { 
      array_push($json, $uni->name); 
     } 

     return json_encode($json); 

    } 

} 

エラー：

Uncaught SyntaxError: Unexpected token o in JSON at position 1 
at JSON.parse (<anonymous>) 
at Function.n.parseJSON (jquery-1.12.4.min.js:4) 
at Object.<anonymous> (feed.js:177) 
at i (jquery-1.12.4.min.js:2) 
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2) 
at y (jquery-1.12.4.min.js:4) 
at XMLHttpRequest.c (jquery-1.12.4.min.js:4) 

JSONサンプル：

["TU - Berlin"] 

EDIT：

私はそのていない機能の使用に関することを発見a新しいデータでビューを「再読み込み」してから、再度関数を使用しようとする方法と何か関係があります。そこで、HTMLをどのように見せているのか、ルートを呼び出して再度ビューを取得する方法と、新しいデータの取得方法に関するロジックを示します。

HTML：

<form action="{{ route('shop.changeto', ['kind' => 'uni']) }}" method="get"> 
          <li class="dick" style="margin-bottom: 20px;"><input type="text" class="search" id="keyworduni" name="searchuni" value="" placeholder="Search" autocomplete="off"> 
           <input type="submit" value="Search" id="Batton1"></li> 
          <li class="dick"> 
           <div id="resultsuni"> 
            <div class="itemuni">abc</div> 
            <div class="itemuni">def</div> 
            <div class="itemuni">hij</div> 
           </div> 
          </li> 
          {{ csrf_field() }} 
         </form> 

と呼ばれるルート：

Route::get('/changeto/{kind}', [ 
'uses' => 'ProductController@changeTo', 
'as' => 'shop.changeto' 

]）。

呼び出された関数：

public function changeTo(Request $request, $kind){ 

    if($kind == 'uni'){ 
     $route = "shop.feeduni"; 
     $argument = "'". "uni" . "'"; 
     $argumentequals = $request->input('searchuni'); 
    } else if($kind == 'school'){ 
     $route = "shop.feedschool"; 
     $argument = "'". "school" . "'"; 
     $argumentequals = $request->input('searchschool'); 
    } 

    return redirect()->route($route, [$argument => $argumentequals]); 

} 

次のルート（I'amはUNIの検索）：

Route::get('/feeduni/{uni}', [ 
'uses' => 'ProductController@getFeedUni', 
'as' => 'shop.feeduni' 

]）。

と呼ばれる機能：

public function getFeedUni(Request $request, $uni){ 

    if($uni == ' '){ 
     $uni = $request->input('searchuni'); 
    } 

    $posts = DB::table('products')->where([ 
     ['sold', '=', 'n'], 
     ['uni', '=', $uni], 
    ])->latest()->paginate(2); 

    //returns the index page from shop folder and attach Product Data 
    // the string products can then be used as $products in shop.index -> have all the products 

    if($request->ajax()){ 

     return [ 
      'posts' => view('shop.feedajax')->with(compact('posts'))->render(), //gibt uns feedajax mit neuen posts 
      'next_page' => $posts->nextPageUrl() //setzt den wert für html nextpage element 
     ]; 
    } 

    /** 
    * now returning the view and the posts 
    */ 
    return view('shop.feed')->with(compact('posts')); 
} 

今私は前と同じビュー上だと私は結果としてエラーで再びjqueryの機能を使用しようとしています。
多分誰かが私の間違いを見つけることができます。

Answer 1

問題はdataが既にあなた用に非直列化されているためです。オブジェクトを逆シリアル化しようとすると、表示されているエラーが発生します。コードから$.parseJSON()コールを削除するだけです。またdataが対象となり、そうではない$().each()、それを反復する$.eachを使用する必要がyu'llことに注意してください。動作しません。残念ながら

$.get("searchuni", { search: keyword }).done(function(data) { 
    $('#resultsuni').html('').show(); 

    $.each(data, function(key, value) { 
     $('#resultsuni').append('<div class="itemuni">' + value + '</div>'); 
    }); 

    // I'd also suggest making this a single delegated event handler 
    $('.itemuni').click(function() { 
     var text = $(this).html(); 
     $('#keyworduni').val(text); 
    }); 

    if ($('#keyworduni').val() == ''){ 
     $('#resultsuni').hide(); 
    } 
});