I am building a kind of list app. The list contains almost 100 items. so I need to add a search bar which facilitates user selection .
This is my code
const searchTitle = () => {
const results = state.values();
for (const value of results) {
if (value.title == term) {
const id = value.id;
const title = value.title;
const audio_url = value.audio_url;
navigate('Show', {id, title, audio_url});
}
}
}
Search is working well but the issue that user has to type all the sentence I need to get some modification so the user can type only few words and either get a suggestions or autocomplete the search
any help will be highly appreciated and thank you in advance
For improving the search try the solution by Mahdi N:
if(value.title.includes(term))
For adding a favourite list, you can maintain a new field in each item as favourite and assign it true/false.
Or you can have a favourite list with ids of favourite items.
Related
in my automation, I'm trying to find an element with a specific text on a page.
to be more specific: every page is a movie info page and has a list of actors and I'm trying to find a specific actor.
if found I will count it - count ++.
if not I will move to the next page and try to find it there.
again and again, until I searched all of the pages.
The problem I encountered is how to get the text of the elements, and whenever the automation does not find the text it crashes.
the element : <a data-testid="title-cast-item__actor" href="/name/nm2794962?ref_=tt_cl_t_1" class="StyledComponents__ActorName-y9ygcu-1 eyqFnv">Hailee Steinfeld</a>
the one thing that separates the identification of the elements is the inner text (the name of the actor)
Something like this:
let x = 0;
cy.visit('/your/pages')
cy.get('[data-testid="title-cast-item__actor"]')
.contains('Hailee Steinfeld')
.then(() => cy.log(`Count: ${++x}`));
or with visiting all your pages:
let x = 0;
const pages = ['/page1', '/page2'];
cy.wrap(pages).each((page) => {
cy.visit(page);
cy.get('[data-testid="title-cast-item__actor"]')
.invoke('text')
.then((text) => {
cy.log(`Actor: ${text}`);
if (text === 'Hailee Steinfeld') {
x++;
}
return cy.wrap(x);
})
}).should('be.greaterThan', 0);
But be aware that conditional testing is something that is not recommended by cypress. See https://docs.cypress.io/guides/core-concepts/conditional-testing#The-problem
I am new to React Native. I am trying to make an app of my own to try out the different things that I learnt and also get to know new things and one such thing that I came across and is giving me a hard time is the following issue:
I have an API which gives me certain data about an item. The properties of the item are listed in the API like "sizeofitem" , "nameofitem" or "itemacategory". Now there are multiple items for different items and not all properties are present in each item. What I was trying to achieve is to somehow map these properties in the following manner:
If let's say "sizeofitem", should become "Size of Item", "nameofitem" should become "Name of Item". Now these properties are different of all the items so for example, sizeofitem might be in one item detail list but might not be in another, but I have all the properties that are can be there. Can someone help me how to do this?
Till now I have the following:
const [itemDtl , setItemDtl] = useState([]);
const getItemInfo = async (id) => {
try{
const response = await api.get(`myAPI/${id}`);
setItemDtl(response.data.obj.itemutils);
}catch(err){
console.log(err);
}
}
let arr = [];
for(let i in itemDtl){
arr.push(itemDtl[i].util_type);
}
console.log(arr);
useEffect(() => {
getItemInfo(id);
})
arr array has whatever the properties where listed for the item in the API i.e. [sizeofitem, nameofitem , etc].
I want an array to have [Size of Item, Name of Item , etc].
Basically just, to sum up, I want to rename the list of properties that can be there for when whatever property comes up is then stored in an array with the mapped string I have given, so for example if an item has 'sizeofitem : 50', I want it to be stored as "Size of item" so that I can show that on the screen. And there are like a total of 5 properties that can exist for an item so I can code it somewhere maybe like sizeofitem : 'Size Of Item' so that when sizeofitem property is top be shown on the screen I can use this and show Size of Item on the screen.
try this:
const [itemDtl , setItemDtl] = useState([]);
const getItemInfo = async (id) => {
try{
const response = await api.get(`myAPI/${id}`);
let arr = [];
for(let i in itemDtl){
arr.push(itemDtl[i].util_type);
}
setItemDtl(arr);
}catch(err){
console.log(err);
}
}
useEffect(() => {
getItemInfo(id);
})
I am integrating Algolia autocomplete and do not like the look of the autocomplete suggestions.
Specifically, I don't want the administrative municipalities and districts to appear in the suggestions, only address, city, country.
How can I omit the administrative query?
For example, if I type in "Sarajevo" the suggestions appear as "Sarajevo, Kanton of Sarajevo, Bosnia and Herzegovina" - I want it to appear as simply "Sarajevo, Bosnia and Herzegovina".
You should use the templates option of the Places constructor.
Here's a simple example:
const placesInstance = places({
...
templates: {
suggestion: function(s) {
return [s.highlight.name, s.highlight.city, s.highlight.country].join(', ');
}
}
});
Have a look at the function that is used by default for a more elaborate sample:
https://github.com/algolia/places/blob/master/src/formatDropdownValue.js
To solve the problem of once you select a 'place', the administrative level gets displayed in the search bar., you can leverage on jquery's focusout event.
Example
var cityCountry ,searchInput;
searchInput = $('#search-input'); //our search field
//Initialize
var placesAutocomplete = places({
// appId: 'YOUR_PLACES_APP_ID',
// apiKey: 'YOUR_PLACES_API_KEY',
container: document.querySelector('#search-input'),
});
//Attach required data to cityCountry
placesAutocomplete.on('change', function(e){
let suggestion,city,country;
suggestion = e.suggestion;
city = suggestion.name;
country= suggestion.country;
cityCountry = city+', '+country;
});
//Manipulate the search field on focusout
searchInput.on('focusout', function(){
setTimeout(function () {
searchInput.val(cityCountry);
},1)
});
Note, it won't work without the setTimeout().
In my app I have to add Search field and some select fields.
when I add any character in search field corresponding content from store should be display.
Currently I am using search field on which I am handling keyup event.
Please let me know the flow and guide line to do this.
Thanks
I suppose you want a search feature for your search field..showing the results as you type. You can achieve this by using regular expressions and compare them with entries in the store.
Here's the code I used on a project:
//referencing my searchfield
Search: '#searchfield';
//attaching an event
Search: {
keyup: "OnFocus"
}
//the actual function
OnFocus: function (searchField, e) {
var query = searchField.getValue(); //get the value entered in the search field
var ContactsContainer = this.getContactsContainer(); //the container that holds my contacts
var store = Ext.getStore('Contacts'); // the store where I have the info
store.clearFilter(); //assure there aren't any filters set
if (query) { //if the current value in the search field
var thisRegEx = new RegExp(query, 'i'); //new regular expression with our value
store.filterBy(function (record) { //filter the store
if (thisRegEx.test(record.get('name')) //the fields in the store
thisRegEx.test(record.get('surname'))
thisRegEx.test(record.get('phone'))) {
return true; //must include this
};
return false;
});
}
Good Luck!
I'm new to Rally's SDK. I'm trying to create a Kanban board that only shows the cards where the owner field = the person who's logged in (i.e. a My Kanban Board). What code should I add and where should I add it?
The following isn't my ideal answer to this issue, but I'd thought I'd post in case it helps someone else. I took the code from the Filter Epic post as suggested and modified it. It's not ideal for me because the filter occurs after the initial data pull, so it is only filtering the first 100 records the initial query pulled. Ideally, I want to change the initial pull of data to filter on username.
After this code in the Filtering Epic:
for (i=0;i<workproducts.length;i++) {
thisWorkProduct = workproducts[i];
Add:
//get the owner field value
var owner = "";
if (thisWorkProduct.Owner) {
if (thisWorkProduct.Owner.DisplayName) {
owner = thisWorkProduct.Owner.DisplayName;
}
else if (thisWorkProduct.Owner.UserName) {
owner = thisWorkProduct.Owner.UserName;
}
}
And then change:
if (thisWorkProduct.Children.length === 0) {
To:
if ((thisWorkProduct.Children.length === 0) && (owner === "__USER_NAME__")) {
And add in an if in the defects else (so it will now look like this):
else {
// If it's a Defect, it has no children so push it
if (owner === "__USER_NAME__") {
childlessWorkProducts.push(thisWorkProduct);
}
It's probably not the most efficient code because I'm new to javascript.
And if anyone has suggestions on how to do the username filter in the initial data pull, I'd love to hear them.
You can filter on the initial data pull by including a query in the cardboardConfig object:
var cardboardConfig = {
//... other properties
query: new rally.sdk.util.Query('Owner = /user/__USER_OID__')
};
Check out this answer:
Filtering epics from Kanban board
It would be pretty straightforward to adapt the filtering callback to filter by Owner instead of just child-less artifacts.