We Keep Coding

Show suggestions from when user types a specified character in textbox

Problem Statement: Using javascript or Jquery, I want to build this functionality where if user types a specified character in a textbox, say # symbol, then values of an array should be displayed in drop down. say for example I have array with values:
values[ yyyy,yy]
when User types: abc#
then after # yyyy and yy should appear in drop down.
It is like when we write # symbol in whatsapp group it shows the list of contacts of that group. this functionality is similar to that.
Also, it is different from normal autosuggest which shows suggestions when user types something.It is different from jquery autocomplete functionality, where suggestion is shown based on the input present in the text box. Here we want values of a predefined list in drop down, the moment a user types # symbol and not on the basis of whole input in the textbox.
Experts please help to achieve this.

Basic Implementation:
You can attach a listener on the keypress in the input / some specific element (Could also be a contenteditable div)
and then you can check if the user has pressed the # key or not.
let element = document.getElementById('#some-element');
element.addEventListener('keydown', function(event) {
const key = event.key;
if (key === '#') {
displaySuggestions();
}
});
As soon as the user presses the '#' key, you can call the displaySuggestions() functions.
It'll be a simple component which you can build and when the user clicks on any of the value in the suggestion, you can insert that value at the caret position.
Refer the following: Insert text into textarea at cursor position (Javascript)
There are many libraries out there which nicely provide this functionality, you may want to check them out.
Update:
I made a small project on codesandbox and you can click on the following link to check it out:
This will help with a starting point.
I have documented the code explaining the behavior and how it's being done.
In the example I have used a contenteditable div and definitely the example is not optimized for performance but a lot of things can be done around it to improve it.
I agree there are tons of bugs and all of these can be sorted out but in 20-30 minutes, that's all I could do.
To sum it up:
You can take inspiration from this or continue editing this or come up with a better solution of yours.
Other people might be having great solutions to this and I look forward to them.
May the Power of Javascript be with you.
Here's the project in action:

Is there a way to get key name from keyCode/which for certain language programmatically?

So, here's the case:
I have a search field on an html page (app), which gives suggestions as a user types
A user can type stuff there in either language X or English
(s)he can forget what language layout (s)he currently has and start typing in a wrong layout
What I'd like to achieve:
on input, make the same change as in the field in a couple of variables, in one in English, in another – in the language X
make suggestions based on the two variables, not the field content, so that if the user has confused language layout, (s)he will get an adequate suggestion anyway
Now, the question is: is it possible to convert e.which or e.keyCode programmaticaly into a standart layout letter for certain language without listing stuff like
var keysMap = {
..,
keyCode: { englishLetter: .., languageXletter: .. } ,
..
}
(in other words, do browsers know about what letter should a keyCode/which correspond to? or does so jQuery?)
I imply two cases:
language X is known (say, I can hardcode it)
language X is unknown, can it be extracted from the browser to reduce this to the case 1?
PS in a certain sense, I'd like implement an analogue of PuntoSwitcher/KeyboardNinja/.. on the side of the page (but only in sense of the suggesion generation, I guess that it's impossible to force keyboard layout switch from a web page).
PS2 Ok, for clarification let me copy my comment for T30 here:
Let language X be Russian like it is for me. Consider this: I'd like to type "request", but my keyboard layout is Russian, not English, so I get "куйгуые". Or I'd like to type Russian "запрос", but I have English layout and so I get "pfghjc". This is what I mean by "wrong layout". I'd like to interpret "pfghjc" as both "pfghjc" and "запрос" or "куйгуые" as both "куйгуые" and "request", and give suggestions based on both versions. This way I'll help the user even if (s)he hasn't switched to the "correct" language.

Detecting each character inputed in field and run conditionals

I am building a web app. I believe it will be easiest if I try to explain what I want the user experience to look like before I ask my question.
I want my user to go on my site and begin to type in a text field. When each character is inputted, I want to run a conditional statement on that character to decided if it should be added to the text field. If the character inputted is not one I want, the character isn't added.
I have validations in my model to do this after the text is submited, but I want it to be real time. I'm guessing this relates to JavaScript and I am not comfortable enough in coding it to know what to search for/research. Can you assist me in where to look (Tutorials, Concepts, etc)?
Thank you for taking the time to read this.

You can do this with the preventDefault method on the event object passed to the keydown event. This basically tells the browser to not preform its default action (which on a text field would be appending the letter to the field).
Here is an implementation using jQuery for brevity, but you can implement the same functionality in pure javascript as well:
$('input').on('keydown', function(event) {
// event.which is the character code
if ( /* some condition */ ) event.preventDefault();
});
And here is a fiddle with an example where you cannot type the letter A: http://jsfiddle.net/354XJ/

It's not precisely your situation but a very good starting point would be this question and its answers: How to allow only numeric (0-9) in HTML inputbox using jQuery?
You are basically looking for javascript that will intercept the keypress and only allow it if it is an allowed key, the question above implements this for numeric keys - start with that and expand it as per your needs.

jqGrid custom filtering with build in filtering toolbar

I'm using the latest jqGrid version and I'm wondering if it's possible to do local filtering with custom rules (see example below). First of all, the filter toolbar can be switched on by applying
jQuery("#grid").jqGrid('filterToolbar', options);
In the past I implemented this manually (the version I currently use does not support local filtering, so I added this feature according the my needs) and now, after an update to the latest version, I asked myself if jqGrid offers this functionalty by default (Not the local filtering, which it does, but the custom filtering rules) as the functionality impressively increased over the last months. I read the documentation and searched the internet, but did not find a suitable example.
Here is an example of what I want to achieve.
There's a column First Name which hold the first name of the persons displayed.
Stefan
Stephan
Stephano
Stelios
Philip
Phillip
Philipp
Ivan
Iwan
...
Now the user enters Ste in the filtering bar for column First Name and the result with the default filtering algorithm should be :)
Stefan
Stephan
Stephano
Stelios
So far so good. But what if I want to display names which are ortographically similar? I want the user to enter Ste*an* to only display
Stefan
Stephan
Stephano
So you see, * stands for a wildcard for any character zero or more times. Additionally I want the user to be able to enter Ste?an* resulting in
Stefan
where ? means any character exactly once. One last requirement is to make the filtering more tolerant and matching not only the hole line (starting and ending, equivalent to regular expressions), but matching the column value if it contains the text entered, i.e. e*o matching
Stephano
Stelios
If you could give me a hint with the * wildcard, the other problems should right themselves.
Thanks in advance
Kai

In my old answers here and here I described how one can implement custom filtering.
If you in the demo type for example "ev" in the filter for 'Client' column you will see the following:
You can easy modify the demo to make for example 'Stephan' and 'Stefan' equivalent.
I personally use mostly defaultSearch: 'cn' in the filterToolbar options. Together with the usage of ignoreCase: true it follow to very good user experience. In my personal opinion such filtering is good enough. More advanced user can use Advanced Searching to create the filter like 'begin with' "Ste" AND 'contains' "an" instead of Ste*an*.
Nevertheless you can use idea from my old demo to overwrite some internal searching methods used by jqGrid.

How to create an N:N relation editor in web page?

I have to create a small "who does what" web application for incoming letter routing:
there is a relatively long list (about 600 items) of employees;
there is a short list (about 5 items) of tasks;
when assigning a task to an employee, due date must be specified;
As a result, i need a list (sequence of items matters in this case, since the first employee in the list is considered the "main responsible person"):
John Smith - write a response letter - 20.01.2010
Frederica Minoso - review the incoming letter - 18.01.2010
Robert Geer - review the incoming letter - 18.01.2010
If we had, say, 10 employees, the design would be quite easy - a drop-down list of employees, a drop-down list of tasks, a date picker for due date, a "Add to list button"
Like this alt text http://naivist.net/tmp/layout.jpg
And of course, I would add a result list with "move up"/"move down" buttons besides it.
However, a drop-down list of 600 items is obviously too much; this means that some user searching by name, surname, department must take place.
I am skilled enough to technically create the application (JavaScript, jQuery and ajax requests being my friends), but the trouble is - how to design the interface of the web form so that the users would understand what exactly they are doing? How to lay out the items in form? What to show in the beginning, what to hide?
Maybe there are there some modern UI form patterns I could use here? For instance, maybe a text box where user can type in and auto-suggest with closest matches drops out?
Maybe some draggable/droppable pattern can be applied (for instance, after you have entered user's name, you drop it on an appropriate task)? How easily do users typically adopt to such non-standard interfaces?
To state a question - how do people typically solve this kind of data input problems? Have you seen good examples of this somewhere on the web? Tell me, because I can't think of any right now.
Sorry, there are many questions and many of them are discussable. Should I mark it as "community wiki"?

As soon as I saw the problem, I thought AutoComplete. Since you thought the same, it is probably the obvious solution to the problem. The "To" field of emails has the same issue - how to select that one person from 1,000s of contacts.
Yahoo has some good accessibility considerations to be sure that the AutoComplete field works in a manner that is obvious and consistent with typical behavior.
Since the task contains 5 items, drop downs are acceptable. The recommended upper limit for drop downs is 7 items, so you are within the limit. One suggestion would be to end the tasks with "by" or "on" so that the line reads like a sentence - John Doe writes a response letter on 22/01/2010. Also, including a little visual aid in the drop down could increase conprehension in some situations.

To begin with with, I'm not sure I agree with the non-standard interface part. I suppose it depends on who the users actually are, but I would definitely say that that kind of text box/auto search functionality is becoming very standard from airline booking forms to search engines.
About the selection method, I would go for the text box method, so that when a user types in text a search starts the results of which are displayed in a drop down. The search should of course search both surnames and first names with some kind of intelligent regex at least.
On top of that I would still add a selection field, maybe not a drop down but perhaps a list box that contains all the employees, possibly with options to order the names by surname or first. This would be for those who don't know the spelling of a persons name, or can't quite remember the name.
Otherwise the layout you have there seems to work for me. I wouldn't play around with dragging and dropping anything. This of course creates a nice feeling to it, but is way more unclear on what should be done to assign the tasks. If you find yourself writing instructions on how to use the thing then you've gone overboard.
The other thing that I thought of would be to have an appleish menu where you have an empty list at first and when you click on the list, the input fields appear. The problem with this is that since the UI doesn't have indication on what you should do to add stuff to the list, people are easily left baffled.