Question

我正在尝试使用Bootstrap Typeahead在表单的tags字段中使用自动完成功能。当我输入一封信时，我在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);

}

我试图激活typeahead

<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>

如何修复此错误？

谢谢。

Answer 1

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

Answer 2

function a(elem){
  var b = elem.value;
  if (Number.isNaN(+elem.value) ) {
    elem.value=b.substring(0,b.length-1);
  }

};

Bootstrap Typeahead w Laravel Uncaught TypeError：无法读取未定义的属性“length”

2 个答案: