Jira like autocomplete for textarea - javascript

I want to implement Jira like auto complete behavior for one of my pet project.
Check following screenshot.
I have searched hard for any existing plugin that could able to deliver it but couldn't find anyone.
I have tried following things (JsFiddle Link):
Add textarea and input(hidden initially) field elements.
Bind a keyPress event on textarea
Capture # key and showing input field enabled with jQuery#autocomplete plugin with list of users
HTML:
<div class='span12'>
<textarea id='comments' class='span12'></textarea>
<input id='users' class='span12 hide' />
</div>
Script:
$(function() {
var users = [
"Ram",
"Ramesh",
"Rakesh",
"Rahul",
"Abhi",
"Karan"
];
$('#comments').on('keypress', function(e){
if(e.keyCode === 64) {
$( "#users" ).removeClass('hide');
$( "#users" ).autocomplete({
source: users
});
}
});
});
My questions are:
How can we trigger #text to show auto-complete list with text as selected?
After selecting the user, how we can insert that user name in the textarea?

Following are the three JavaScript plugins I found which serves the purpose I am looking for:
jQuery-textcomplete.js
At.js
triggeredAutocomplete.js

A great implementation with a UI just like this is jquery.mentionsInput.
It works with arrays of objects to auto-suggest as well as content fetched via AJAX requests. It requires jQuery and underscore.js and supports MSIE 8 and better.
Of particular note is it that exports links to usernames using a simple Markdown style markup, storing internal ID's alongside the #username mention. This means you can easily parse the text to do things like trigger events based on who is mentioned and means you can display real, human readable names in text but still correlate them with unique user ID's internally.
Any Markdown library can convert it to plain text if you need to just store or display the result as plain text.

Related

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

Filtering table data based on search keyword using jQuery

I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch

Set focus to the Filter input in a jQuery UI MultiSelect Widget

I am writing a small script which will set focus to the filter text input field of the multi select jquery widget. Based on the documentation, I can subscribe to the click event of the widget like this:
// bind to event
$("#multiselect").bind("multiselectopen", function(event, ui){
// event handler here
});
So I tried this:
$("#MyStatusWidget").bind("multiselectopen", function(event, ui){
// event handler here
$(this).$(".ui-multiselect-filter").contents('input :text').focus());
});
Here is a link to the widget: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
I also tried a couple other methods ($('').is(':text'); etc), but can't get the hook.
Here is the HTML:
<div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter">
<div class="ui-multiselect-filter">
Filter:
<input type="search" placeholder="Enter keywords">
</div>
<ul class="ui-helper-reset">
</div>
Thank you
I know this is a little old, but in my case i had alot of these widgets on the page. So I did something a little different that worked perfectly.
$("#MyStatusWidget").multiselect({
open: function () {
$(this).multiselect("widget").find("input[type='search']:first").focus();
}
});
When you create your multi select widget simply add the following "open" method.
$("#MyStatusWidget").multiselect({
open: function () {
$("input[type='search']:first").focus();
}
});
For IE10 bowser:
$("#MyStatusWidget").multiselect({
open: function () {
$("input[type='text']:first").focus();
}
});
I haven't tried the first two solutions to see if rrusnak's problems exist. My Solution doesn't have any of the problems rrusnak mentions about the others. This one works with an unlimited number of Selectors on a page and uses simple jQuery along with Eric Hynds recommendations of implementing his multiselect filter system to the multiselect widget:
$("#MyStatusWidget").multiselect({
open: function () {
$(this).multiselectfilter("widget").find('input').focus();
}
}).multiselectfilter({
label: '',
autoReset: true
});
Its clean, can be chained with the other widget options and immediately allows text input without having to first click on the input filter.
IMO Eric should have included an automatic focus in his filter script - as the use of a filter on the widget implies that it is to be used anyway. So having to manually focus to the input field is an unnecessary click for users.
The above two answers worked for me, however there were a number of irritating things with the plugin that happen when the filter is focused. Most notably you can no longer use the arrow keys to select an option, which really takes away keyboard control.
I have implemented a number of changes, that you can find at my github link below.
Fixes tabbing issues with the form
Allows use of the arrow keys to select options while the filter is selected
I have changed the traverse function to be friendly towards filtered lists.
I have changed the traverse function to move up one selection at a time when using the up arrow (instead of going to the top of the list)
Pressing 'f' (or 'ctrl-f') will re-focus on the filter box
Hopefully this helps anyone who has had some of the same issues as myself. The changes are in both the regular multiselect as well as the filter src files.
https://github.com/rrusnak1/jquery-ui-multiselect-widget

JQuery Tokenizing Autocomplete w/ trigger key

Is there a good solution to create textfield inputs like those of Facebook or Google+ status updates and posts where a tokenizing autocomplete is allowed to happen after certain trigger keys like "#" or "+"?
It seems like there are a couple of good tokenizing autocomplete plugins but I'm trying to find a way to call the autocomplete only when the key is present before a term but let's the user type plain non-autocompleted text otherwise.
It seems like you might be able to hack something together with bind but I'm pretty new to JavaScript so if there is a simple more elegant solution I'd love to hear it.
Using jquery is not very difficult. First set a class to identify your input boxes. For example:
<input type="text" class="autocomplete" name="the_name" />
Then, you can simply capture the keyup event and check for the key you need. For example, # symbol has the keycode 64
$(".autocomplete").keypress(function(e) {
if (e.which == 64) {
// your event handler
}
});
You can see all event codes and more info about .keypress() here.
Your event handler may use the jquery.ajax function to ask the server for the data to fill your selector.
If you want to autocomplete after entering some text, for example if the user writes "#tyle" you have to modify the condition in the above code, to get the last word written and check if it has an # at the beginning.

Javascript link in drupal view

I'm telling the view to display a field with the NID contents. I'm telling it that I wish to "Rewrite the output of this field" and I enter:
<a href=”javascript:void(0);” onclick="javascript: approve([nid])" >Approve</a>
When viewing the page, all the javascript has been stripped. How do I get views to accept javascript in the link, or what other way can I use to display a link?
Note: Custom Text field doesn't work either.
Found the solution! http://drupal.org/project/views_customfield
From the description:
This module provides some useful (views)fields.
Available (views)fields:
Markup
Field that allows usage of custom text and the input filter system.
PHP code
Field that allows usage of custom PHP code (with access to view's database result)
Rownumber
Field containing rownumber (respects pagers).

Categories