獲取bootstraps typeahead功能在rails中處理數據庫查詢

Question

我是rails和javascript的新手，並且對於我來說無法實現這個功能。所以我試圖使用bootstraps typeahead來獲得一個自動完成功能，但不斷遇到障礙。

所以首先我嘗試一個例子，從這個site，一切都很好。在我view我有

<input input="text" name="query" id="search" autocomplete="off" /> 

在我application.js我有

//= require jquery 
//= require jquery_ujs 
//= require jquery-ui 
//= require twitter/bootstrap 
//= require jquery-fileupload/basic 
//= require_tree . 

在我的javascript資產的文件夾我有一個名爲custom.js，我傾倒我的JavaScript文件。

在該文件中我有

var colors = ["red", "blue", "green", "yellow", "brown", "black"]; 

$('#search').typeahead({source: colors}); 

所以，現在當我打開了我的看法我有一個漂亮的文本框與白手起家typeahead運作。

但我不想使用靜態數組來查找值。我想訪問數據庫列，並查看該列中的所有值（這些值都是唯一的），並理想地提供伴隨id到輸入字段。所以我谷歌，不幸的是嘗試第一次理解JavaScript的同時。

這個問題，或者非常相似的問題，在這裏被問了幾次，但不知何故這些問題都沒有讓我的代碼工作。

一些答案建議this腳本，但是當我從custom.js文件複製代碼，並保存爲bootstrap-typeahead.js我的正常工作JS停止工作（我在做的是錯了嗎？）。

所以我試着在bootstraps網站上建議的最低工作解決方案。我想要的代碼是這樣的custom.js

$('#search').typeahead({ 
    source: function (query, process) { 
     $.get('sources', { query: query }, function (data) { 
      return process(JSON.parse(data)); 
     }); 
    } 
}); 

和控制器的動作是這樣的

def index 
    if params[:query] 
     @sources = Source.find(:all, :conditions => ['name LIKE ?', "%#{params[:query]}%"]) 
    else 
     @sources = Source.all 
    end 

    respond_to do |format| 
     format.html # index.html.erb 
     format.json { render json: @sources } 
    end 
    end 

所以，在這裏我想我可能是在我目前的理解能力結束。當我使我的看法和類型輸入字段我的控制檯顯示

Started GET "/sources?query=s" for 127.0.0.1 at 2013-05-06 12:30:10 +0000 
Processing by SourcesController#index as */* 
    Parameters: {"query"=>"s"} 
    Source Load (0.9ms) SELECT "sources".* FROM "sources" WHERE (name LIKE '%s%') 
    Rendered sources/index.html.erb within layouts/application (0.2ms) 
    Rendered layouts/_shim.html.erb (0.1ms) 
    Rendered layouts/_header.html.erb (2.8ms) 
Completed 200 OK in 194ms (Views: 189.8ms | ActiveRecord: 0.9ms) 

如此美妙，我的函數調用是正確的行動和正確的查詢...但它返回的東西嗎？輸入字段中沒有任何內容顯示（名稱列中有一條記錄的值爲KG-01），以及如何查看該函數的json輸出是什麼？我在哪裏錯了？

Answer 1

從日誌中，您可以看到您的請求正在作爲HTML處理並呈現索引，而不是返回JSON。

嘗試用$.getJSON代替$.get。這將告訴jQuery來做出JSON的請求，並解析爲您的JSON結果：

$.getJSON('sources', { query: query }, function (data) { 
    // this would print the data to the firefox/chrome javascript console 
    console.log(data); 

    // the data coming back from your rails action is an array of `Source` 
    // records, but typeahead just wants the name. You could either modify 
    // the server action to just return a list of names, or extract them here. 
    var names = data.map(function (source) { return source.name; }); 

    // Note there is no need to `return` here, as it would be returning from 
    // the anonymous callback function, not `source`. 
    process(names); 
});