Skip to content
This repository was archived by the owner on Sep 10, 2023. It is now read-only.

Commit 576340f

Browse files
committed
Implemented setOptions() function
Store settings/options in element's data object so that we can change option for each element So that we can change settings at anytime Following example shows that we can change propertyToSearch and hintText at anytime we want Example: $(document).ready(function() { $(element).tokenInput([{ "first_name": "Arthur", "last_name": "Godfrey", "email": "[email protected]", "url": "https://si0.twimg.com/sticky/default_profile_images/ }, { "first_name": "Adam", "last_name": "Johnson", "email": "[email protected]", "url": "https://si0.twimg.com/sticky/default_profile_images/ }], {propertyToSearch: "first_name"} ); }); Later we can do followings at anytime $(element).tokenInput("setOptions", {propertyToSearch: 'first_name', hintText: "Type first name here to search"}); $(element).tokenInput("setOptions", {propertyToSearch: 'last_name', hintText: "Type last name here to search"}); $(element).tokenInput("setOptions", {propertyToSearch: 'email', hintText: "Type email here to search"}); $(element).tokenInput("setOptions", {propertyToSearch: 'url', hintText: "Type url here to search"}); Check *Change propertyToSearch anytime* demo in demo.html file
1 parent 641b6dd commit 576340f

File tree

2 files changed

+284
-88
lines changed

2 files changed

+284
-88
lines changed

demo.html

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,197 @@ <h2>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFo
456456
</script>
457457
</div>
458458

459+
<h2>Change propertyToSearch anytime</h2>
460+
<div>
461+
<input type="text" id="demo-input-change-propertytosearch-anytime" name="blah" />
462+
Search by :<input type="radio" checked="checked" name="search_key" value="first_name" /> First Name
463+
<input type="radio" name="search_key" value="last_name" /> Last Name
464+
<input type="radio" name="search_key" value="email" /> Email
465+
<input type="radio" name="search_key" value="url" /> Url <br />
466+
<input type="button" value="Submit" />
467+
<script type="text/javascript">
468+
$(document).ready(function() {
469+
$('input[name="search_key"]').click(function() {
470+
$("#demo-input-change-propertytosearch-anytime").tokenInput("setOptions", {propertyToSearch: $(this).val(), hintText: "Type "+$(this).val()+" here to search"});
471+
});
459472

473+
$("#demo-input-change-propertytosearch-anytime").tokenInput([{
474+
"first_name": "Arthur",
475+
"last_name": "Godfrey",
476+
"email": "[email protected]",
477+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
478+
},
479+
{
480+
"first_name": "Adam",
481+
"last_name": "Johnson",
482+
"email": "[email protected]",
483+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
484+
},
485+
{
486+
"first_name": "Jeff",
487+
"last_name": "Johnson",
488+
"email": "[email protected]",
489+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
490+
},
491+
{
492+
"first_name": "Adriana",
493+
"last_name": "Jameson",
494+
"email": "[email protected]",
495+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
496+
},
497+
{
498+
"first_name": "Adriano",
499+
"last_name": "Pooley",
500+
"email": "[email protected]",
501+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
502+
},
503+
{
504+
"first_name": "Alcir",
505+
"last_name": "Reis",
506+
"email": "[email protected]",
507+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
508+
},
509+
{
510+
"first_name": "Jack",
511+
"last_name": "Cunningham",
512+
"email": "[email protected]",
513+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
514+
},
515+
{
516+
"first_name": "Alejandro",
517+
"last_name": "Forbes",
518+
"email": "[email protected]",
519+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
520+
},
521+
{
522+
"first_name": "Alessandra",
523+
"last_name": "Mineiro",
524+
"email": "[email protected]",
525+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
526+
},
527+
{
528+
"first_name": "Alex",
529+
"last_name": "Frazo",
530+
"email": "[email protected]",
531+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
532+
},
533+
{
534+
"first_name": "Alexandre",
535+
"last_name": "Crawford",
536+
"email": "[email protected]",
537+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
538+
},
539+
{
540+
"first_name": "Alexandre",
541+
"last_name": "Lalwani",
542+
"email": "[email protected]",
543+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
544+
},
545+
{
546+
"first_name": "Alexandre",
547+
"last_name": "Jokos",
548+
"email": "[email protected]",
549+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
550+
},
551+
{
552+
"first_name": "Alexandre",
553+
"last_name": "Paro",
554+
"email": "[email protected]",
555+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
556+
},
557+
{
558+
"first_name": "Andre",
559+
"last_name": "Niemeyer",
560+
"email": "[email protected]",
561+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
562+
},
563+
{
564+
"first_name": "Alyssa",
565+
"last_name": "Fortes",
566+
"email": "[email protected]",
567+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
568+
},
569+
{
570+
"first_name": "Amit",
571+
"last_name": "Alvarenga",
572+
"email": "[email protected]",
573+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
574+
},
575+
{
576+
"first_name": "Ana Bia",
577+
"last_name": "Borges",
578+
"email": "[email protected]",
579+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
580+
},
581+
{
582+
"first_name": "Ana",
583+
"last_name": "Akamine",
584+
"email": "[email protected]",
585+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
586+
},
587+
{
588+
"first_name": "Anderson",
589+
"last_name": "Tovoros",
590+
"email": "[email protected]",
591+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
592+
},
593+
{
594+
"first_name": "Andre",
595+
"last_name": "Borges",
596+
"email": "[email protected]",
597+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
598+
},
599+
{
600+
"first_name": "Andre",
601+
"last_name": "Wexler",
602+
"email": "[email protected]",
603+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
604+
},
605+
{
606+
"first_name": "Andre",
607+
"last_name": "Williams",
608+
"email": "[email protected]",
609+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
610+
},
611+
{
612+
"first_name": "Andre",
613+
"last_name": "Sanford",
614+
"email": "[email protected]",
615+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
616+
},
617+
{
618+
"first_name": "Andre",
619+
"last_name": "Wayne",
620+
"email": "[email protected]",
621+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
622+
},
623+
{
624+
"first_name": "Andre",
625+
"last_name": "Jackson",
626+
"email": "[email protected]",
627+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
628+
},
629+
{
630+
"first_name": "Andre",
631+
"last_name": "Jolly",
632+
"email": "[email protected]",
633+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
634+
},
635+
{
636+
"first_name": "Andre",
637+
"last_name": "Henderson",
638+
"email": "[email protected]",
639+
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
640+
}
641+
], {
642+
propertyToSearch: "first_name",
643+
resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='first_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div><div class='url'>" + item.url + "</div></div></li>" },
644+
tokenFormatter: function(item) { return "<li><p>" + item.first_name + " " + item.last_name + "</p></li>" },
645+
});
646+
});
647+
</script>
648+
</div>
649+
460650
<h2>Start disabled</h2>
461651
<div>
462652
<input type="text" id="demo-input-disabled" name="blah" />
@@ -488,5 +678,6 @@ <h2>Start disabled</h2>
488678
</script>
489679
</div>
490680

681+
491682
</body>
492683
</html>

0 commit comments

Comments
 (0)