Bootstrap Typeahead w Laravel Uncaught TypeError：无法读取未定义的属性“长度”答案

【问题标题】：Bootstrap Typeahead w Laravel Uncaught TypeError: Cannot read property 'length' of undefinedBootstrap Typeahead w Laravel Uncaught TypeError：无法读取未定义的属性“长度”
【发布时间】：2013-12-08 05:31:59
【问题描述】：

我正在尝试使用 Bootstrap Typeahead 在我的表单的标签字段中使用自动完成功能。当我现在输入一封信时，我在 chrome 开发人员工具中告诉我一个错误：

Uncaught TypeError: Cannot read property 'length' of undefined

我的表格很快：

    <form class="form-horizontal" method="post" action="" autocomplete="off">
        <!-- CSRF Token -->
     .....
     <!-- Tags -->
      <div class="control-group {{ $errors->has('tag_id') ? 'error' : '' }}">
        <label class="control-label" for="tags">Tags</label>
           <div class="controls">
             <input type="text" class="typeahead" data-provide="typeahead"   autocomplete="off" >
             {{ $errors->first('tag_id', '<span class="help-inline">:message</span>') }}
           </div>
      </div>
      .....
    </form>

我的博客使用管理员前缀：

Route::group(array('prefix' => 'admin'), function()
{
  Route::get('/', array('as' => 'blogs', 'uses' => 'Controllers\Admin\BlogsController@getIndex'));
        Route::get('create', array('as' => 'create/blog', 'uses' => 'Controllers\Admin\BlogsController@getCreate'));
        Route::post('create', 'Controllers\Admin\BlogsController@postCreate');
        Route::post('tags', 'Controllers\Admin\BlogsController@postTags');
}

我的控制器是：

public function postTags()
{
      $query = Input::get('query');

      $results = Tag::select( 'name' )->where( 'name', 'LIKE', '%' . $query . '%')->get();

      $data = array();
      // Loop through the results.
      //
      foreach ( $results as $result ):
               $data[] = $result->name;
      endforeach;

            // Return a response.
            //
     return Response::json($data);

}

我尝试激活预先输入

<script type="text/javascript">
     $('.typeahead').typeahead({
                  source : function(typeahead, query){
                $.ajax({
                    url      : 'tags',
                    type     : 'POST',
                    data     : { query : query, column : 'name' },
                    dataType : 'json',
                    async    : true,
                    success  : function(data) {
                        return process(data.titles);
                    }
                });
            }
    });
</script>

我该如何解决这个错误？

谢谢。

【问题讨论】：

您使用的是什么版本的 TwB？
我使用 bootstrap 2.3.2

标签： jquery twitter-bootstrap laravel bootstrap-typeahead

【解决方案1】：

  $('.typeahead').typeahead({
                                source: function(typeahead,query) {
                                    $.ajax({
                                        url: "http://localhost:8080/url",
                                        dataType: "json",
                                        type: "GET",
                                        data: {
                                            max_rows: 15,
                                            query: query,
                                            ajax: 1
                                        },
                                        success: function(data) {
                                            var return_list = [], i = data.length;
                                            while (i--) {
                                                return_list[i] = {Name: data[i].Id, value: data[i].name};
                                            } 
                                            return typeahead.process(return_list);
                                        }
                                    });
                                },

                        });

【讨论】：

【解决方案2】：

typeahead 函数必须返回 ajax 查询。在你的情况下：

<script type="text/javascript">
 $('.typeahead').typeahead({
              source : function(typeahead, query){
            return $.ajax({
                url      : 'tags',
                type     : 'POST',
                data     : { query : query, column : 'name' },
                dataType : 'json',
                async    : true,
                success  : function(data) {
                    return process(data.titles);
                }
            });
        }
});

【讨论】：

process 此处未定义。
与原代码不同的是“return”语句。过程当然没有定义。这取决于用例。