We are trying to create a autocomplete input field which behaves more like the code editor autocomplete i.e it parses a nested json object / any other representation to fetch the next part.
As an example:
{
"user": {
"age": int,
"name": string,
"gender": string,
"company": {
"name": string,
"employee_count": int
}
}
}
In this case I want a dynamic input field which first suggests "user". On selecting user - it would show a drop down with age, name, gender & company. On further selecting user.company - it can show name and employee_count as dropdown items.
Context: we are building some API documentation and want to provide a search on various object paths.
Have seen this setup fairly frequently but not able to locate a standard way to implement this.
I can ofc use jQuery to keep manipulating the DOM and updating the dropdown options, but hoping for a neater solution.
Related
I am using "react-multiselect-checkboxes" plugin. The options passed to the dropdown have 'label' and 'value' which is common to any dropdown. However, when I supply a search term, the search result returns all the options that contain the search term in either 'label' or 'value'.
For example, from the below JSON array, it will return the first two elements if one searches for the term 'ee' because 'value' in the second element of the array contains 'ee':
{
"value": "bab11c73-7dc6-4949-a856-e6fbd7e5540f",
"label": "Sandeep"
},
{
"value": "3ce374c3-2843-4d64-b088-970e4nb3f7ee",
"label": "Arvind"
},
{
"value": "eb1a6465-da5e-4be0-b48d-7767623cd888",
"label": "Ayush"
}
]
This result is incorrect from the end-user point of view. How can we restrict the react-multiselect-checkboxes to search in only the label?
react-multiselect-checkboxes is based on react-select which by default searches in both value and label.
A fix for this was mentioned in this issue https://github.com/JedWatson/react-select/issues/4393#issuecomment-765396267
by default the component searches through both value and label. If you want to only search through the label you have to use the filterOption prop in conjunction with the createFilter function exposed from the package. This will create a new filter function based on a configuration you provide.
So I don't believe you can fix this out of the box with react-multiselect-checkboxes, and you would have to make some changes yourself.
If it's an option, consider using another lib that allows you to customize this
I am using Jeff Collins Ment.io Angular js library.
How can I get all the selected mentions from a text area
$scope.people = [
{ label: 'Joe'},
{ label: 'Mike'},
{ label: 'Diane'}
]
is my people object and I've selected Joe and Mike from the text area using '#'. Now I want to get those two
according to:
https://github.com/jeff-collins/ment.io/issues/75
"ment.io is only designed to populate fields by inserting in data after a menu selection with an ability for you to create a transformation in your mentio-select function, and doesn't govern the data in the field. that's up to you to parse out as you see fit."
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)
I have a requirement to give multiple values to thymeleaf attribute. In my view page, it is a combination of angular, thymleaf with spring mvc.
<div id="zipLookup" ng-controller="AddressManagementCtrl" data-th-attr="data-data=*{primary.zipcode}, *{primary.county}, *{primary.city}, *{primary.street1}, *{primary.street2}">
which is throwing error
TemplateProcessingException: Could not parse as assignation sequence. "data-data=*{primary.postCode},*{primary.county},*{primary.city},*{primary.street1},*{primary.street2}"
It is clear that the syntax is incorrect, but can some one suggest me the correct way to implement this.
The intention is the after document parse, it should look something like this:
data-data='{
"zipCode": "90292",
"state": "CA",
"county": "--",
"city": "Marina",
"addressLine1": "...",
"addressLine2": "..."
}'
Here zipcode, state,county,city,addressline1,addressline2 are properties of spring bean.
I'm kind of new to thymeleaf and angular-js. Can someone help? Is there a way to implement this?
The following will work:
data-th-attr="data-data= + *{primary.zipcode} + ',' + *{primary.county}"
The output HTML would be:
data-th-attr="data-data=somezip,somecountry"
I suggest however that you consider the possibility of preparing the string in the Controller (possibly using a JSON library like Jackson) and passing that to the model (which will then just you use it directly).
Basically, what I need to do is create a Fullscreen window display for a shop using data that is being used on their current website, now, I have choosen to use AngularJS for this project, mainly because I want to learn it and the best way to learn is doing.
I have a JSON file containing an array of items, it currently contains the following data:
{
"prop_id" : "",
"prop_title" : "",
"prop_postcode" : "",
"prop_price" : "",
"prop_image" : "",
"prop_desc" : "",
"template" : "views/prop-no-thumbs.html",
"info_image" : "",
"duration" : "4000"
},
So, I have a unique ID, the template that I wish to use to display this item and the duration I want the view to be present on the screen. These will vary.
What would be the best way to handle this in AngularJS, I have made a start using some example code I found on GitHub but can't seem to get it to automatically rotate (question can viewed here: AngularJS: Slide divs automatically with a set duration on page load ).
Any ideas? Should I also be using a third party plugin? Does anyone have any tutorials or resources to handle something like this?
You could use the angular ui bootstrap carousel directive and tweak with css (remove the arrows, resize it, etc...)