Как использовать Twitters typeahead.js с API Microsoft OData API?

У меня возникли проблемы при написании веб-приложения для извлечения данных JSON из нашего приложения CRM.Как использовать Twitters typeahead.js с API Microsoft OData API?

Что я хочу сделать, это использовать плагин Twitter's typeahead.js для удаленного получения информации о клиенте из нашего приложения CRM. Microsoft предоставляет способ использования данных JSON для связи. Они называют это OData. Однако это не похоже на ваши типичные ответы JSON. Вот почему у меня возникли проблемы с настройкой плагина typeahead.

Когда я посылаю запрос GET к URL API, я получаю следующий ответ:

{ 
    "d":{ 
     "results":[ 
      { 
       "__metadata":{ 
        "uri":"http://*****/*****/XRMServices/2011/OrganizationData.svc/AccountSet(guid'de227fde-fb40-dd11-b5d3-001cc46325e5')", 
        "type":"Microsoft.Crm.Sdk.Data.Services.Account" 
       }, 
       "Name":"Some company as", 
       "AccountId":"de227fde-fb40-dd11-b5d3-001cc46325e5" 
      }, 
      { 
       "__metadata":{ 
        "uri":"http://*****/*****/XRMServices/2011/OrganizationData.svc/AccountSet(guid'5dc70a19-e91e-e311-9ad7-005056ac083a')", 
        "type":"Microsoft.Crm.Sdk.Data.Services.Account" 
       }, 
       "Name":"Compnay AS", 
       "AccountId":"5dc70a19-e91e-e311-9ad7-005056ac083a" 
      } 
     ] 
    } 
}

Так вот вопрос: Как настроить машинописный плагин Twitter, чтобы работать с этой структурой данных ?

Я хочу значение Name из ответа JSON при отображении предложений. И я хочу получить значение AccountId, когда выбрано предложение.

Это то, что я получил в своем коде до сих пор:

HTML:

<!DOCTYPE html> 
<html lang="no"> 
    <head> 
     <title>Company :: Time Registrering</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="css/global.css" /> 
    </head> 
    <body> 

     <form action="" method="GET" autocomplete="off"> 
      <input type="text" name="account" id="account" placeholder="Kunde..."> 
     </form> 

     <script type="text/javascript" src="js/jquery.min.js"></script> 
     <script type="text/javascript" src="js/typeahead.js"></script> 
     <script type="text/javascript" src="js/global.js"></script> 
    </body> 
</html>

JavaScript: (JS/global.js)

$(document).ready(function() { 
    var accounts = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: "http://*****/*****/xrmservices/2011/OrganizationData.svc/AccountSet?$select=Name,AccountId&$filter=substringof('%QUERY',Name) and StateCode/Value eq 0" 
    }); 

    accounts.initialize(); 

    $("#account").typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 2 
    }, { 
     name: 'account', 
     displayKey: 'd.results[0].Name', 
     source: accounts.ttAdapter() 
    }); 

});

Однако: Мой код не работает. Все, что я получаю, это текст с надписью «undefined» под полем ввода. У меня есть подозрение, что моя ссылка datumTokenizer или displayKey неверна. Я не совсем понимаю datumTokinizer. Так что если кто-то может просветить меня на это, я благодарен :)

источник

2015-01-22 Alexander Johansen

Вы должны использовать фильтр и использовать jQuery.map

HTML

<input type="text" name="account" id="account" placeholder="Kunde..." />

$(document).ready(function() { 



    var accounts = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
     url : "https://gist.githubusercontent.com/anonymous/80a75d841a055ea0e480/raw/4eb8d4f1833d8a15cae1830097c090f5d581bd12/gistfile1.txt", 
     filter: function(jsonValue) { 

       return $.map(jsonValue.d.results, function (result) { 
       return { 
        value: result.Name 
       }; 
      }); 
     } 
    }  


    }); 

    accounts.initialize(); 

    $("#account").typeahead({ 
     hint: false, 
     highlight: true, 
     minLength: 2 
    }, { 
     source: accounts.ttAdapter() 
    }); 

});

Fiddle here

источник

2015-01-22 12:40:18 Quannt

Ну это веселая. Так же, как я понял это и написал свой ответ: вы сделали то же самое. В любом случае, спасибо! :) –

Рад, что вы сами это вычислили: D – Quannt

Я нашел решение проблемы. Я заметил, что могу использовать функцию фильтра в объекте Bloodhound и генерировать массив с $ .map, поэтому движок Bloodhound мог бы выглядеть так, как это предполагалось.

Это то, что мой код JavaScript выглядит сейчас (HTML, не меняется от вопроса):

$(document).ready(function() { 
    var accounts = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: "http://****/****/xrmservices/2011/OrganizationData.svc/AccountSet?$select=Name,AccountId&$filter=substringof('%QUERY',Name) and StateCode/Value eq 0", 
      filter: function (accounts) { 
       return $.map(accounts.d.results, function (account) { 
        return { 
         Name: account.Name, 
         AccountId: account.AccountId 
        }; 
       }); 
      } 
     } 
    }); 

    accounts.initialize(); 

    $("#account").typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 2 
    }, { 
     name: 'account', 
     displayKey: 'Name', 
     source: accounts.ttAdapter() 
    }); 


    $("#account").on('typeahead:selected', function(dom, selectedItem) { 
     console.log(selectedItem.AccountId); 
    }); 
});

Надеется, что это поможет другим людям делать то же самое, как и я :)

источник

2015-01-22 12:41:01

Как использовать Twitters typeahead.js с API Microsoft OData API?

ответ

Смежные вопросы