2016-03-05 89 views
0

假設我有以下json對象,其中包含有關一組人的信息。通過屬性搜索json對象的自動完成功能

data=[{id:2, fname:"bob", lname:"roberts", common_name:null, email:"[email protected]", telephone:"555-555-5555", street:"333 Street St", city:"Salt Lake City", state:"UT", country:null, zip:"99999", dynamid:null, notes:null, director:false, contractor:false, contractor_need_agreement:false, shareholder:false, shares_held:0, company_id:1, created_at:"2016-02-23T10:15:09.339Z", updated_at:"2016-02-23T10:15:09.339Z", officer:false, snapshot:null, sign_term_voting:false, drag_liquidation_approval:false, rofr_consenter:false, investor_councel:false, ir_insured:false, issuer_signing_officer:false, issuer_registered_agent:false, issuer_councel:false, rep_lead_investor:false, rep_investor:false, rep_founder:false}, 
     {id:1, fname:"John", lname:"Smith", common_name:null, email:"[email protected]", telephone:"555-555-5555", street:"333 Street St", city:"Salt Lake City", state:"UT", country:null, zip:"99999", dynamid:null, notes:null, director:false, contractor:false, contractor_need_agreement:false, shareholder:false, shares_held:0, company_id:1, created_at:"2016-02-23T10:15:09.327Z", updated_at:"2016-02-23T10:15:09.327Z", officer:false, snapshot:null, sign_term_voting:false, drag_liquidation_approval:false, rofr_consenter:false, investor_councel:false, ir_insured:false, issuer_signing_officer:false, issuer_registered_agent:false, issuer_councel:false, rep_lead_investor:false, rep_investor:false, rep_founder:false}] 

現在我想實現,通過每個人的名字搜索文本框某種自動完成功能(即fname+" "+lname)尋找匹配。在找到匹配時,它或者返回找到匹配的人或者該人的身份。

我在開始這件事時遇到了一些麻煩。我想我可以把它寫出來,我用keyup來觸發一個遍歷對象的循環,顯示匹配字符串的這些名字,並在點擊其中一個時返回相應的索引,但這似乎是我重新發明了輪子。

是否有一種有效的/最佳實踐的方式來拉這種功能?

+0

你可以嘗試jQueryUI的自動完成功能... –

+0

你可以將所有FNAME +」「+ L-NAME在數組和提供它作爲自動完成功能的來源 –

回答

1

從這個typeahead.js演示here

完整的代碼上jsfiddle

var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches, substringRegex; 

    matches = []; 

    substrRegex = new RegExp(q, 'i'); 

    $.each(strs, function(i, str) { 
     var fullname = str.fname + " " + str.lname 
      console.log(fullname); 

     if (substrRegex.test(fullname)) { 
     matches.push(fullname); 
     } 
    }); 

    cb(matches); 
    }; 
}; 
+0

嘿,謝謝你的迴應和小提琴。當我選擇值(即來自對象的id)時,我最終有興趣從自動完成中獲得其他屬性。我該怎麼做? – neanderslob

+0

我不知道我是否瞭解你,你可以舉一個例子 – irfan

+0

如果你想達到所選人的ID:https://jsfiddle.net/refan/a62vuceu/4/ – irfan

相關問題