Jak dodać niestandardowy znacznik, a następnie dopasować wartość z jednego pola wejściowego do drugiego pola wejściowego za pomocą polecenia onkeyup?

Scenariusz roboczy: Użytkownik ma 2 wejściowe pole tekstowe, w którym może przeszukiwać znacznik gry, a następnie dodawać wyszukiwaną wartość zmiennej do 2. pola wprowadzania. OświadczenieJak dodać niestandardowy znacznik, a następnie dopasować wartość z jednego pola wejściowego do drugiego pola wejściowego za pomocą polecenia onkeyup?

Problem: Użytkownik chce dodać nowy niestandardowy znacznik, który nie jest obecny w przeszukiwanego liście, a następnie dołączyć wartość tego nowego niestandardowego znacznika w polu wejściowym 2. wykorzystaniem onkeyup

Here is the working Demo

$(function() { 
 
    $('#vidyagames').tokenInput([{ 
 
     id: 7, 
 
     name: "Super Mario" 
 
    }, { 
 
     id: 11, 
 
     name: "Battletoads" 
 
    }, { 
 
     id: 13, 
 
     name: "Pong" 
 
    }, { 
 
     id: 17, 
 
     name: "The Legend of Zelda" 
 
    }, { 
 
     id: 19, 
 
     name: "Metroid" 
 
    }, { 
 
     id: 23, 
 
     name: "Donkey Kong Country" 
 
    }, { 
 
     id: 29, 
 
     name: "Super Smash Bros." 
 
    }, { 
 
     id: 32, 
 
     name: "Star Fox" 
 
    }, { 
 
     id: 35, 
 
     name: "Starcraft" 
 
    }, { 
 
     id: 37, 
 
     name: "Pokemon" 
 
    }, { 
 
     id: 38, 
 
     name: "Minecraft" 
 
    }, { 
 
     id: 41, 
 
     name: "The Sims" 
 
    }, { 
 
     id: 43, 
 
     name: "Final Fantasy" 
 
    }, { 
 
     id: 44, 
 
     name: "Resident Evil" 
 
    }, { 
 
     id: 46, 
 
     name: "Kingdom Hearts" 
 
    }, { 
 
     id: 47, 
 
     name: "Tetris" 
 
    }, { 
 
     id: 48, 
 
     name: "Grand Theft Auto" 
 
    }, { 
 
     id: 51, 
 
     name: "World of Warcraft" 
 
    }, { 
 
     id: 53, 
 
     name: "Metal Gear Solid" 
 
    }, { 
 
     id: 54, 
 
     name: "Civilization" 
 
    }, { 
 
     id: 56, 
 
     name: "Pac-Man" 
 
    }, { 
 
     id: 59, 
 
     name: "Animal Crossing" 
 
    }, { 
 
     id: 62, 
 
     name: "Spyro the Dragon" 
 
    }, { 
 
     id: 64, 
 
     name: "Crash Bandicoot" 
 
    }, { 
 
     id: 65, 
 
     name: "Sonic the Hedgehog" 
 
    }, { 
 
     id: 72, 
 
     name: "Tomb Raider" 
 
    }, { 
 
     id: 77, 
 
     name: "Mortal Kombat" 
 
    }, { 
 
     id: 81, 
 
     name: "Space Invaders" 
 
    }], { 
 
     theme: "facebook", 
 
     hintText: "Know of any cool games?", 
 
     noResultsText: "Nothin' found.", 
 
     searchingText: "Gaming...", 
 
     preventDuplicates: true, 
 
     onAdd: function(item){ 
 
      sync(this.tokenInput("get")); 
 
     }, 
 
     onDelete: function(item){ 
 
      sync(this.tokenInput("get")); 
 
     } 
 
    }); 
 

 
});

 name: "Minecraft" 
 
    }, { 
 
     id: 41, 
 
     name: "The Sims" 
 
    }, { 
 
     id: 43, 
 
     name: "Final Fantasy" 
 
    }, { 
 
     id: 44, 
 
     name: "Resident Evil" 
 
    }, { 
 
     id: 46, 
 
     name: "Kingdom Hearts" 
 
    }, { 
 
     id: 47, 
 
     name: "Tetris" 
 
    }, { 
 
     id: 48, 
 
     name: "Grand Theft Auto" 
 
    }, { 
 
     id: 51, 
 
     name: "World of Warcraft" 
 
    }, { 
 
     id: 53, 
 
     name: "Metal Gear Solid" 
 
    }, { 
 
     id: 54, 
 
     name: "Civilization" 
 
    }, { 
 
     id: 56, 
 
     name: "Pac-Man" 
 
    }, { 
 
     id: 59, 
 
     name: "Animal Crossing" 
 
    }, { 
 
     id: 62, 
 
     name: "Spyro the Dragon" 
 
    }, { 
 
     id: 64, 
 
     name: "Crash Bandicoot" 
 
    }, { 
 
     id: 65, 
 
     name: "Sonic the Hedgehog" 
 
    }, { 
 
     id: 72, 
 
     name: "Tomb Raider" 
 
    }, { 
 
     id: 77, 
 
     name: "Mortal Kombat" 
 
    }, { 
 
     id: 81, 
 
     name: "Space Invaders" 
 
    }], { 
 
     theme: "facebook", 
 
     hintText: "Know of any cool games?", 
 
     noResultsText: "Nothin' found.", 
 
     searchingText: "Gaming...", 
 
     preventDuplicates: true, 
 
     onAdd: function(item){ 
 
      sync(this.tokenInput("get")); 
 
     }, 
 
     onDelete: function(item){ 
 
      sync(this.tokenInput("get")); 
 
     } 
 
    }); 
 

 
}); 
 
@import url('http://fonts.googleapis.com/css?family=Henny+Penny'); 
 
html, 
 
body, 
 
div, 
 
span, 
 
applet, 
 
object, 
 
iframe, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
blockquote, 
 
pre, 
 
a, 
 
abbr, 
 
acronym, 
 
address, 
 
big, 
 
cite, 
 
code, 
 
del, 
 
dfn, 
 
em, 
 
img, 
 
ins, 
 
kbd, 
 
q, 
 
s, 
 
samp, 
 
small, 
 
strike, 
 
strong, 
 
sub, 
 
sup, 
 
tt, 
 
var, 
 
b, 
 
u, 
 
i, 
 
center, 
 
dl, 
 
dt, 
 
dd, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label, 
 
legend, 
 
table, 
 
caption, 
 
tbody, 
 
tfoot, 
 
thead, 
 
tr, 
 
th, 
 
td, 
 
article, 
 
aside, 
 
canvas, 
 
details, 
 
embed, 
 
figure, 
 
figcaption, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
output, 
 
ruby, 
 
section, 
 
summary, 
 
time, 
 
mark, 
 
audio, 
 
video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
    outline: none; 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    background: #e7e7e7 url('http://i.imgur.com/qoKmNN9.png'); 
 
    /* http://subtlepatterns.com/natural-paper/ */ 
 
    
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    font-size: 62.5%; 
 
    line-height: 1; 
 
    color: #444; 
 
    padding-top: 25px; 
 
    padding-bottom: 65px; 
 
} 
 
br { 
 
    display: block; 
 
    line-height: 1.6em; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 
ol, 
 
ul { 
 
    list-style: none; 
 
} 
 
input, 
 
textarea { 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: none; 
 
} 
 
blockquote, 
 
q { 
 
    quotes: none; 
 
} 
 
blockquote:before, 
 
blockquote:after, 
 
q:before, 
 
q:after { 
 
    content: ''; 
 
    content: none; 
 
} 
 
strong, 
 
b { 
 
    font-weight: bold; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
img { 
 
    border: 0; 
 
    max-width: 100%; 
 
} 
 
h1 { 
 
    font-family: 'Henny Penny', Arial, sans-serif; 
 
    font-weight: normal; 
 
    font-size: 3.35em; 
 
    line-height: 1.6em; 
 
    margin-bottom: 15px; 
 
    color: #616161; 
 
} 
 
p { 
 
    font-size: 1.6em; 
 
    line-height: 1.25em; 
 
    margin-bottom: 15px; 
 
} 
 
/* page structure */ 
 

 
#wrapper { 
 
    display: block; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    padding: 35px 22px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); 
 
    -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); 
 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); 
 
} 
 
#searchbar { 
 
    display: block; 
 
    padding: 15px 0px; 
 
} 
 
/* custom settings */ 
 

 
.token-input-token-facebook p { 
 
    font-size: 1.0em; 
 
    color: #555; 
 
} 
 
.token-input-selected-token-facebook p { 
 
    color: #fff; 
 
} 
 
/** tokeninputs **/ 
 
/* Example tokeninput style #1: Token vertical list*/ 
 

 
ul.token-input-list { 
 
    overflow: hidden; 
 
    height: auto !important; 
 
    height: 1%; 
 
    width: 400px; 
 
    border: 1px solid #999; 
 
    cursor: text; 
 
    font-size: 12px; 
 
    font-family: Verdana; 
 
    z-index: 999; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
    list-style-type: none; 
 
    clear: left; 
 
} 
 
ul.token-input-list li { 
 
    list-style-type: none; 
 
} 
 
ul.token-input-list li input { 
 
    border: 0; 
 
    width: 350px; 
 
    padding: 3px 8px; 
 
    background-color: white; 
 
    -webkit-appearance: caret; 
 
} 
 
li.token-input-token { 
 
    overflow: hidden; 
 
    height: auto !important; 
 
    height: 1%; 
 
    margin: 3px; 
 
    padding: 3px 5px; 
 
    background-color: #d0efa0; 
 
    color: #000; 
 
    font-weight: bold; 
 
    cursor: default; 
 
    display: block; 
 
} 
 
li.token-input-token p { 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li.token-input-token span { 
 
    float: right; 
 
    color: #777; 
 
    cursor: pointer; 
 
} 
 
li.token-input-selected-token { 
 
    background-color: #08844e; 
 
    color: #fff; 
 
} 
 
li.token-input-selected-token span { 
 
    color: #bbb; 
 
} 
 
div.token-input-dropdown { 
 
    position: absolute; 
 
    width: 400px; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    border-left: 1px solid #ccc; 
 
    border-right: 1px solid #ccc; 
 
    border-bottom: 1px solid #ccc; 
 
    cursor: default; 
 
    font-size: 12px; 
 
    font-family: Verdana; 
 
    z-index: 1; 
 
} 
 
div.token-input-dropdown p { 
 
    margin: 0; 
 
    padding: 5px; 
 
    font-weight: bold; 
 
    color: #777; 
 
} 
 
div.token-input-dropdown ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div.token-input-dropdown ul li { 
 
    background-color: #fff; 
 
    padding: 3px; 
 
    list-style-type: none; 
 
} 
 
div.token-input-dropdown ul li.token-input-dropdown-item { 
 
    background-color: #fafafa; 
 
} 
 
div.token-input-dropdown ul li.token-input-dropdown-item2 { 
 
    background-color: #fff; 
 
} 
 
div.token-input-dropdown ul li em { 
 
    font-weight: bold; 
 
    font-style: normal; 
 
} 
 
div.token-input-dropdown ul li.token-input-selected-dropdown-item { 
 
    background-color: #d0efa0; 
 
} 
 
/** tokeninputs facebook **/ 
 
/* Example tokeninput style #2: Facebook style */ 
 

 
ul.token-input-list-facebook { 
 
    overflow: hidden; 
 
    height: auto !important; 
 
    height: 1%; 
 
    width: 550px; 
 
    border: 1px solid #8496ba; 
 
    cursor: text; 
 
    font-size: 12px; 
 
    font-family: Verdana; 
 
    min-height: 1px; 
 
    z-index: 999; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
    list-style-type: none; 
 
    clear: left; 
 
} 
 
ul.token-input-list-facebook li input { 
 
    border: 0; 
 
    width: 100px; 
 
    padding: 3px 8px; 
 
    background-color: white; 
 
    margin: 2px 0; 
 
    -webkit-appearance: caret; 
 
} 
 
li.token-input-token-facebook { 
 
    overflow: hidden; 
 
    height: auto !important; 
 
    height: 15px; 
 
    margin: 3px; 
 
    padding: 1px 3px; 
 
    background-color: #eff2f7; 
 
    color: #000; 
 
    cursor: default; 
 
    border: 1px solid #ccd5e4; 
 
    font-size: 11px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    float: left; 
 
    white-space: nowrap; 
 
} 
 
li.token-input-token-facebook p { 
 
    display: inline; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li.token-input-token-facebook span { 
 
    color: #a6b3cf; 
 
    margin-left: 5px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
li.token-input-selected-token-facebook { 
 
    background-color: #5670a6; 
 
    border: 1px solid #3b5998; 
 
    color: #fff; 
 
} 
 
li.token-input-input-token-facebook { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
div.token-input-dropdown-facebook { 
 
    position: absolute; 
 
    width: 400px; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    border-left: 1px solid #ccc; 
 
    border-right: 1px solid #ccc; 
 
    border-bottom: 1px solid #ccc; 
 
    cursor: default; 
 
    font-size: 11px; 
 
    font-family: Verdana; 
 
    z-index: 1; 
 
} 
 
div.token-input-dropdown-facebook p { 
 
    margin: 0; 
 
    padding: 5px; 
 
    font-weight: bold; 
 
    color: #777; 
 
} 
 
div.token-input-dropdown-facebook ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div.token-input-dropdown-facebook ul li { 
 
    background-color: #fff; 
 
    padding: 3px; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 
div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { 
 
    background-color: #fff; 
 
} 
 
div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { 
 
    background-color: #fff; 
 
} 
 
div.token-input-dropdown-facebook ul li em { 
 
    font-weight: bold; 
 
    font-style: normal; 
 
} 
 
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { 
 
    background-color: #3b5998; 
 
    color: #fff; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script> 
 

 
<script> 
 
    function sync(items) { 
 
     var value = items.reduce(function(s, item){ 
 
      return s + ' ' + item.name; 
 
     }, ''); 
 
     
 
     $('#n2').val(value.slice(1)); 
 
    } 
 
</script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
     <h1>Dynamic Tag Input Suggestions</h1> 
 
     <p>Start typing the name of a popular video game to get some helpful suggestions.</p> 
 
     <div id="searchbar"> 
 
      1st input 
 
      <input type="text" id="vidyagames" name="vidya"> 
 
      <br/> 
 
      <br/> 2nd input 
 
      <input id="n2" size="50"> 
 
     </div> 
 
    </div> 
 
    <!-- @end #wrapper --> 
 
</body>

Źródło

2017-01-31 Waqas Adil

Twoje rozwiązanie nie będzie działać, ponieważ to, co edytujesz, nie jest już wejściem o identyfikatorze vidya. Zamiast tego, jQuery Tokeninput tworzy element <ul>, który następnie można edytować. Według jQuery Tokeninput documentation istnieją cztery wywołania zwrotne:

onResult
onAdd
onDelete
onReady

Powiedziałbym, że najlepiej pasuje do swoich celów byłoby onAdd zwrotna.

Zmieniłem twój kod. Można go znaleźć here

Źródło

2017-02-03 14:34:23 Kuro

Twoje rozwiązanie zastępuje istniejącą wybraną wartość w 2. polu wprowadzania. Chcę dołączyć wszystkie wybrane wartości z 1. pola wprowadzania, do drugiego pola wprowadzania. –

Co więcej, czy użytkownik może dodać niestandardowy znacznik wejściowy w pierwszym polu tekstowym, jeśli tag wyszukiwania nie istnieje? ....... jeśli użytkownik chce dodać słowo takie jak "JavaScript" i naciśnij enter to powinno stać się znacznikiem. –

Biorąc pod uwagę wymagania i komentarz, który chcesz dodać do listy tokena jak dobrze, można zrobić coś jak poniżej:

$(function() { 

    var newToken; 
    var currId = 100; // starting ID for any additions 

    $('#vidyagames').tokenInput([{ 
     id: 7, 
     name: "Super Mario" 
    },

... pomijanie danych .. .

{ 
     id: 81, 
     name: "Space Invaders" 
    }], { 
     theme: "facebook", 
     hintText: "Know of any cool games?", 
     noResultsText: "Nothin' found.", 
     searchingText: "Gaming...", 
     preventDuplicates: true, 
     onAdd: function(item){ 
      sync(this.tokenInput("get")); 
      newToken = null; // without clearing partially typed text would appear as an additional token along with the selected dropdown token 
     }, 
     onDelete: function(item){ 
      sync(this.tokenInput("get")); 
     }, 
     onReady: function(){ 

      $("#token-input-vidyagames").keyup(function(event) { 

      if (event.keyCode === 13 || event.keyCode === 9 || event.keyCode === 188) // return, tab, or comma 
      { 
       if (newToken) $('#vidyagames').tokenInput("add", {id: currId, name: newToken}); // add to the list but only if not null 
       currId++; 
       sync($('#vidyagames').tokenInput("get")); // append tokens to output 
      } 

      newToken = $("tester").text(); // store typed-in token's value prior to next keypress (otherwise it will be empty next Return, Tab, or Comma keypress) 
      }); 
     } 
    }); 
});

Codepen demo: http://codepen.io/anon/pen/egbppd

Wszelkie wpisane są pobierane poprzez wejście wartości $("tester").text() na każdym keyup. Jeśli po Enter, Tab lub przecinkach keyup, jeśli nie został już dodany przez wtyczkę (tj. Nie został znaleziony na istniejącej liście znaczników), dodaje ją jako nowy token i aktualizuje drugi input.

Należy pamiętać, że najlepiej najpierw sprawdzić, czy nowe tokeny nie zostały już uwzględnione, lub otrzymasz duplikaty (z różnymi identyfikatorami). Nie dodałem dodatkowej logiki.

Źródło

2017-02-12 04:14:34

Dodałem tekst wyjaśniający, że jesteś w stanie stworzyć etykietę, której nie ma w tekście "nic nie znaleziono". Tylko ze względu na użyteczność. – Aldana

Jak dodać niestandardowy znacznik, a następnie dopasować wartość z jednego pola wejściowego do drugiego pola wejściowego za pomocą polecenia onkeyup?

Odpowiedz

Powiązane problemy