I am using the react-autosuggest library to implement auto-suggestions functionality. I am pretty new to using this library. I went through the documentation, but it seems to be a bit confusing to me in certain things.
I tried to find answers to a few of the things:
What is the complete list of inputProps that can be passed to the component?
How can we open a dropdown with a list of a few default suggestions as soon as the user clicks on the input box instead of showing suggestions only when the user types in?
What exactly is the use of prop: multiSection when the data is of the form [{ name: '', flag: ''}] (just a sample) and we display only name in the dropdown list?
I found a lot of similar working examples using this library but wasn't able to get hold of the understanding properly. Seems like there are lots of missing points in the library documentation.
I found this one basic clean working snippet: https://codesandbox.io/s/react-autosuggest-example-with-hooks-forked-y7lkom. But was unable to add the dropdown functionality to it.
If anyone can help to get through this feature and some above queries, I would be highly thankful.
Related
I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.
I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.
I've never worked with Ember, and am fairly new to JavaScript, and have for the past couple of days been trying to translate my HTML and JS into the Ember framework (I got some help from a friend). The first feature of the project should simply be able to fill a text-field with longitude/latitude of an inputted address. The second feature of my project is based on a selection from a drop-down menu (drop-down is made of different counties), and fill another text-field with a specific email address depending on which selection was made.
The problem I'm having: I can't seem to figure out how to fire up my setEmail function as I need it to recognize a value (1, 2, 3, 4 etc.) from the selected county from the drop-down, and based on that value; fill in the text-field with the correct email address. I've heard about Ember Observers, but cannot seem to figure out how to implement them for the drop-down I built. I'd really appreciate if someone could take a look at my project and give me pointers on what I could improve, or even do completely differently.
Here is a link to an Ember Twiddle of my project: GeoApp
I appreciate any suggestions and insight! Thank you.
The main idea was right, you were just missing small details. x-select has an "action" hook that you can use which is being triggered every time the value of the x-select changes. This also passed to you as an argument the selected value.
Also there was no need to make the as |xs| part and the options should be set as {{#x-option value='country.value}}country.display{{/x-option}}
Doing all this will make it work. You can find a working twiddle here.
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.
First of all, I'm not a JS developer, so I apologize if I'm asking a rather too general, previously asked or complex question. The functionality I'm searching for is that I'd like to have two HTML lists, on the load the first one is empty and I want user to pick the items he like from the second list and drag them into the first one (which should be sortable so user can set the order he likes). Is there a easy to use plugin for it?
I really like the idea and look of those two plugins..
http://www.emposha.com/javascript/fcbkcomplete.html
http://loopj.com/jquery-tokeninput/
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
There are doing something different, but those "bubbles" in textfield are a great way to handle it (from UX point of view). Just to be able to have an empty text field, available bubbles below it and to be able to drag them into the text field, just those user wants (no autocomplete functionality, just draging from some list of them, maybe sorting in text field available would be nice). Maybe there's a similar plugin to do that.
Another thing is, it's a part of a form so I need to be able to send those picked up elements to the server with the form, each with it's position. I know, I am asking too much but any help will help me.
Try to use Jquery UI
Here are links for demos
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/droppable/
EDIT
I think all you want is this
http://jqueryui.com/demos/droppable/#shopping-cart
Maybe jQuery UI would work for you; it is composed of several handy helper functions.
Take a look at sortable with connected lists: http://jqueryui.com/demos/sortable/#connect-lists