Skip to content
This repository

Dynamic Data Source #277

Open
wants to merge 1 commit into from

3 participants

jaideep87 Nathan Levesque Alexey Grigorkin
jaideep87

Firstly i want to congratulate loopj on Making such a beautiful Plugin
Recently i needed to integrate tokenInput Plugin with GMAP3 plugin(http://gmap3.net/examples/address-lookup.html)
But currently it can only have source as
oblject
url
Dynamic url function // NOTE:it can only compute url dynamically ,not response object

so i Have Made a attempt To Fetch Response Data Dynamically From Function With Asynchronous callback of GMAP3 (This is why i need to create Display() function)

it Can be used this way (eg. of GMAP3)

function googleFetch(query){
            var googleData=[];
            if(typeof query != 'undefined'){
             $("#test").gmap3({
              action:'getAddress',
              address:query,
              callback:function(results){
                for (var i = 0; i < results.length; i++) {
                 googleData.push({"name": results[i].formatted_address});
                }
                $("#input-field").tokenInput("display",googleData,query);
                }
            });
            }


   $("#input-field").tokenInput(
        googleFetch
        , {
                            tokenValue: "name",
            dynamicSource:true,
         });

All For the Sake of if Somebody needed to do something like this
code is working Bug Free for Me,But Certainly be refined

Nathan Levesque

This is exactly what I need for my current project. My use case is that I'm integrating with mobile device APIs via PhoneGap.

Alexey Grigorkin

That's what i really lacked in tokeninput. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Feb 13, 2012
jaideep87 jaideep87 Update src/jquery.tokeninput.js 0b7d214
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 36 additions and 3 deletions. Show diff stats Hide diff stats

  1. +36 3 src/jquery.tokeninput.js
39 src/jquery.tokeninput.js
@@ -46,6 +46,9 @@ var DEFAULT_SETTINGS = {
46 46 onAdd: null,
47 47 onDelete: null,
48 48 onReady: null,
  49 +
  50 + //Dynamic Source
  51 + dynamicSource : false,
49 52
50 53 // Other settings
51 54 idPrefix: "token-input-",
@@ -122,6 +125,10 @@ var methods = {
122 125 toggleDisabled: function(disable) {
123 126 this.data("tokenInputObject").toggleDisabled(disable);
124 127 return this;
  128 + },
  129 + display:function(results,query){
  130 + this.data("tokenInputObject").display(results,query);
  131 + return this;
125 132 }
126 133 }
127 134
@@ -147,7 +154,7 @@ $.TokenList = function (input, url_or_data, settings) {
147 154 settings.url = url_or_data;
148 155
149 156 // If the URL is a function, evaluate it here to do our initalization work
150   - var url = computeURL();
  157 + if(!settings.dynamicSource) var url = computeURL();
151 158
152 159 // Make a smart guess about cross-domain if it wasn't explicitly specified
153 160 if(settings.crossDomain === undefined && typeof url === "string") {
@@ -434,6 +441,19 @@ $.TokenList = function (input, url_or_data, settings) {
434 441 this.toggleDisabled = function(disable) {
435 442 toggleDisabled(disable);
436 443 }
  444 + // Display the drop-down From Dynamic Source
  445 + this.display = function(results,query){
  446 + cache_key = query + "MIGHT BE UNIQUE";
  447 + if($.isFunction(settings.onResult)) {
  448 + results = settings.onResult.call(hidden_input, results);
  449 + }
  450 + cache.add(cache_key, settings.jsonContainer ? results[settings.jsonContainer] : results);
  451 +
  452 + // only populate the dropdown if the results are associated with the active search query
  453 + if(input_box.val() === query) {
  454 + populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
  455 + }
  456 + }
437 457
438 458 //
439 459 // Private functions
@@ -797,13 +817,14 @@ $.TokenList = function (input, url_or_data, settings) {
797 817
798 818 // Do the actual search
799 819 function run_search(query) {
800   - var cache_key = query + computeURL();
  820 + if(!settings.dynamicSource) var cache_key = query + computeURL();
  821 + else cache_key = query + "MIGHT BE UNIQUE";
801 822 var cached_results = cache.get(cache_key);
802 823 if(cached_results) {
803 824 populate_dropdown(query, cached_results);
804 825 } else {
805 826 // Are we doing an ajax search or local data search?
806   - if(settings.url) {
  827 + if(settings.url && !settings.dynamicSource ) {
807 828 var url = computeURL();
808 829 // Extract exisiting get params
809 830 var ajax_params = {};
@@ -856,6 +877,12 @@ $.TokenList = function (input, url_or_data, settings) {
856 877 cache.add(cache_key, results);
857 878 populate_dropdown(query, results);
858 879 }
  880 + else if(settings.dynamicSource) {
  881 +
  882 + //Fetch Data From Dynamic Source
  883 + var results = dynamicSource(query);
  884 +
  885 + }
859 886 }
860 887 }
861 888
@@ -867,6 +894,12 @@ $.TokenList = function (input, url_or_data, settings) {
867 894 }
868 895 return url;
869 896 }
  897 +
  898 + // Fetch Data From Dynamic Source
  899 + function dynamicSource(query){
  900 + var dynamicData = settings.url.call("oops",query);
  901 + return true;
  902 + }
870 903
871 904 // Bring browser focus to the specified object.
872 905 // Use of setTimeout is to get around an IE bug.

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.