Jquery autocomplete and output on same page script - javascript

I need jquery help. And I'm an extreme nube.
What I want is several input fields (say, 1-5) each with autocomplete. If I find my desired input, I select it from the offer. If not what I write is added to the list on that given field (1 has it's own list, 2 it's own etc).
The lists should be saved in a DB on the server so the next person sees any additions.
The output should appear on the same page as it's selected / written in the fields.
Basically, I want a sentence builder (input 1 is subject, 2 is verb, 3 is object, etc). In the future I'd like to be able to make it into a slang translation engine with crowd verification and "Vulgarity Rating". But right now I'm just looking for a prototype of the input.
Anyone want to help or point me toward where I can find info to do it myself?

Related

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:

Website that analyzes excel data

I am quite familiar with C++ and Java for android and now I am trying to use my skills in web programming.
I have an idea of building the website that analyzes data from excel file (or csv) in a following way. Let us assume that a row is consist of four sections: name (string), some description (string), some value (int) and a type (string). The user chooses value and type. First the website checks every row in the column of values and if the value is right, website check the type column. The type that is choosen may be shorter than a content of a section in a given row so the website not only checks if string in row and the choosen are the same but search if in the whole string in a section is any of word that was chosen by user. If all of this is completed, website shows the results by showing two first sections- the name and description.
It doesn't seem hard but I am stuck having no idea from what to begin. I am not asking for a code of course or even very detailed tutorial step by step (however I will be more than gratfull for seekinh detailed answers) but I would like to see what particular steps do I have to do to run this website (including all things to do in html, javascript and other languages if needed), some good tutorials how to do these things or links to the other questions that may help.
Thank you for all answers and best regards, CM

Do you reuse values from a select box?

Let's say that I have a select box in an html page. And the values in that select box come from a db query that returns a not so small list of options.
Now if I need to add another 4 select boxes showing the same list of options, would I have to duplicate the code and so send back to the browser 4*(select_box_result_size) or this is normally done differently?
Regardless of how you are managing the server-side code, the answer is that each select box needs its own group of options. That said, if all options are the same then you should only make one query to your database, and generate the all the select boxes you need with a single function. Simply get the options from the database, store them in a variable and then create your boxes.
Do note that in your HTML each box will have the values hardcoded into it, so your client-side code will have duplicate data, but that doesn't really matter. What is important is that the code that you'll have to maintain is clean, and that you put as little stress as possible on your database. One query + one function is all you need.
If performance was really an issue, you always have the possibility of dynamically-generating the combo boxes using JavaScript. You could essentially embed one and then copy it four more times. However there are two things you need to consider for this:
Do you really have a performance issue that is being caused by these combo boxes? (Probably not)
Is the combo box so big that it will actually take longer to load the HTML across a network connection than it will to copy the box four times with JavaScript? (Again, probably not... remember that the longer the box the longer it will take to copy.)
Unless you have 1000+ options, I would recommend to simply stick to generating the box four times. If you do have that many then do two things:
Benchmark. Create two pages, one with a single combo box and one with four and compare the size. Then compare the load times.
Consider improving your UI. Perhaps if you have 1000 options it would be better for the end user to implement some sort of filtering process to reduce the number of necessary elements... i.e. If you have a box containing all the cities of the world, have one box to select the country and then populate the city box with only the applicable cities by way of a JSON request.
And the values in that select box come from a db query that returns a
not so small list of options.
For user friendliness you could try autosuggest, there are libraries for that but you could try writing your own.
If same data is displayed multiple times (4 times) depending on your server side script it might be best to fetch the data in memory and generate the selects instead of querying 4 times.
would I have to duplicate the code
It's best not to duplicate, at the very least you can write a helper function to generate the select list. If you're serious about removing code from html markup you can look into using one of the many MVC frameworks out there that use templates and allow you to bind data to it.

How to prepopulate few fields in a form, in a survey

I have a share point survey. When we responding to the survey, as we know, it will open NewForm.aspx. this page contains a ListFormWebpart in which questions from survey list will be displayed.
Now, i need to add few labels before the questions and these label values should be prepopulated from query string. What i am trying to achieve from this is, i wll created a link
with some values in query string and send to specific users. different users might have different values in query string. Whenever they click on the link, it should open the survey with prepopulated label values along with questions in list.
I am not sure, how to do it. I have tried to add some html control to web part(using share point designer) and through JavaScript i have tried to set query string values. Then i tried to put asp controls and trued. it didn't work. I am trying since last 2 days. No progress. I am using SharePoint 2003, WSS2.0
Can anybody, please help me to implement this solution.
You may find it easier to create a webpart with a custom form that enters data into the survey list.
The survey lists are useful as they are quite flexible, but your solution will likely make it hard to change your list in future. That means that a webpart specific for this survey may be a valid design decision for you.
An issue with your current implementation is that passing values specific to different users through the query string does not give you any guarantee that enterprising users will not change those values.
This may not really be an issue depending on your situation, but a custom control will allow you to query the current user and make decisions that way.
I have written some Java Script for reading query string, parsing and assigning values to controls based on their ControlID. I have used Content Editor Web Part to add this JavaScript to the Existing Survey page. Then this script has done job of prepopulating the fields.

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.

Categories