I've been researching online and got a lot of resources on how to implement an autocomplete input field. However, all of them are examples of autocomplete for a list of words. I'm trying to build a autocomplete based on a list of objects. So the basic idea would be when users want to see a recommended list of the fields in an object when they type a dot. For example, I have an object below:
const myObj = {
field1: "value1",
field2: 10,
field3: {
nestedField1: "nestedValue1",
...
}
}
So in an input, I can do something like "myObj.", and it will have a list of suggested fields to let users choose.
Does anyone have any idea on how to implement this kind of autocomplete? Or if there is any source related to this kind of project, it would be much appreciated if you could share with me. Thanks in advance.
We used Material UI for something similar, take a look: https://mui.com/material-ui/react-autocomplete/, also if you required something very particular, you can implement yourself without any other library.
Best of luck
Related
I am optimizing a react/redux app and I wondered if there is the best practice to store and render hardcoded strings in such an app? Some of my components are using the same text and if there is a text change I will have to search all for all text occurrences. Would be better to have central location. I mean some static contents that y you do not want to put into state.
I would store all texts in a json object but I assume there must be a better way.
could anyone share his/her experience? any helpful tools or packages?
thank a lot for your answers!
Nothing special here really regarding react or redux, you could just create a constants file...
export const VAR_NAME = "this is some text";
export const ANOTHER_VAR = "something else";
then when you want to use, simply:
import { ANOTHER_VAR } from 'path/to/constants/file';
thank you for comments. In case, someone looks for nice solution this is - https://github.com/yahoo/react-intl
Requires some setup though but does what I wanted through making first steps towards internalization of the app.
i wanted to ask you if there is a way to get the google maps place details in a different language than English. I use AngularJs and i created a directive in which i perform the below steps:
User types in an autocomplete field
I get the results, i parse them and then I try to get the details like this:
service = new google.maps.places.PlacesService(theMap.map);
service.getDetails({
placeId: placeId,
key: googleMapsAPIKey,
language: 'el'
}, function(place) {
myLangAddressComponents = place.address_components;
});
The problem is that myLangAddressComponents information is still in English.
Any help would be appreciated.
Based on the documents regarding Optional Parameters: language,
The language code, indicating in which language the results should be returned, if possible. Note that some fields may not be available in the requested language. See the list of supported languages and their codes. Note that we often update supported languages so this list may not be exhaustive.
I think that there is no problem in your code, it is just not yet available in the requested language. I hope this clear some issues you've encountered. :)
Keep in your mind that you are passing the map instance in the PlacesService. As I saw from experimenting if the map is localized in el then the results would be also in el.
I'm trying to create a content type that allows me to post multiple images from an external database in this sort of style: http://www.newageman.co.uk/14-time-travelling-celebrities
In an ideal world this is what I would like my group of fields to look like in the article creation screen.
http://oi57.tinypic.com/wi0z8i.jpg
Any idea how I would achieve this using best practices? To post articles like this I'm currently using a piece of php code but it's confusing for my contributors, so would like to use fields. I've never made a module or custom field before.
Thank you!
I have done something similar using the Field Group module, you may give it a try.
I am writing a title formatter for display suite, but title isn't a 'CCK' type. Can anyone help me out with how to define the formatter ?
Since title is a property, not a field, you cannot use a field formatter.
You'll need to take another approach to solve this problem, for example override the node template file, implement a hook_preprocess function, or implement hook_node_view.
edit:
There are lots of discussions about properties versus fields.
Here are some links to get you started with some background about why title is still a property, as well as some related modules.
http://drupal.org/node/557292 - Issue: Convert node title to fields
http://drupal.org/node/571654 - Issue: Revert node titles as fields
Note: I have not used all these modules and do not endorse them in any way, and don't claim that they address your question. This is just a short listing for your edification:
http://drupal.org/project/title
http://drupal.org/project/auto_nodetitle
http://drupal.org/project/title_field_ui
What do you mean the title isn't a "CCK" type? It should be a Field. Try this module: http://drupal.org/project/custom_formatters
There is an issue for the custom formatters module about that: #816924: Custom formatter for title field?
I was looking at password strength implementations with ExtJS and came across this particular implementation,
A password strength meter for passwords for ExtJS4.
This is implemented using ExtJS 4 and i was looking to use it with ExtJS 3.
I tried a few options, but couldn't figure out much.
Please let me know if there is something specific i need to do in order to get it working with ExtJS 3.
Here is the Github link for this plugin if that would help.
In several my projects I used this widget:
Ext.ux.PasswordMeter
It worked well, so I think you can review it too.
Seems easy enough. All you would do is extend the Ext.form.TextField class with that same logic. They are processing the actual 'strength' with the onFieldChange event, which in Ext 3 doesn't exist from what I can see in the docs, but you could easily do the same with the keyup : ( Ext.form.TextField this, Ext.EventObject e ) event.
Take a look at the source and see that they define 2 functions, processValue and scorePassword. You could copy those functions directly, and then implement the keyup function to use those.
You would create the class:
Ext.form.PasswordStrength = Ext.extend(Ext.form.TextField, {
initComponent: function () {
// write your code, functions, etc here
// default values you want for your TextField
var config = {
}
Ext.apply(this, config);
Ext.form.PasswordStrength.superclass.initComponent(this);
}
});
// register an xtype
Ext.reg("passwordstrength", Ext.form.PasswordStrength);
That should be enough to get you started.
I modified the Ext.ux.PasswordMeter to be Ext JS 4 compatible. Here is the code: my blog
please feel free to give me feedback.