How to limit the number of dropdown results in v-autocomplete? - vue.js

Image Link I receive 100-200 results from the axios api. I want to show only first 10 from it. Is there any way I can do that. I cannot do that from api since I also want to show the count of total items returning from axios.
Edit: I have a show all button which shows the list of all the item in new pop up. Due to this I want the exact count of total items that are returning but only want to display top 10 results from it.

One option is to use menu-props and adjust the height
<v-autocomplete :menu-props='{ nudgeTop: 110,maxHeight: 125}'></v-autocomplete>

Related

composeTestRule checking that atleast 1 item exists

I have a list which has 2 different items. However, if the user gets close to the end of the list then the 2 same items are added again and again to create an infinite scrolling feel.
I've created a test to basically verify that the item exists like so:
composeTestRule
.onAllNodesWithContentDescription("Home")
.assertCountEquals(2)
As you can see this just finds nodes with the content description of "Home" and checks if their are 2.
Currently, this works as the screen size is small but let's say the screen size is doubled then this will fail as the assertCountEquals(2) would need to check for 4.
I was wondering to make this code better, is there a way to basically check that atleast 1 exists?
onAllNodes methods return an array, grab the first element and check whether it exists or is displayed.
composeTestRule
.onAllNodesWithContentDescription("Home")
.onFirst().assertExists()

Datatables: Create a footer on the fly

In my project, the number of columns in main table depends on the user settings and I get it from AJAX to dataTable directly. Several of these columns show different amounts (eg pre-price, final-price, etc.). Now, I have a task to calculate these pices to total sums in the footer.
I already know in which columns what amounts and the ordinal number of these columns for a every user. The simplest thing left — to put these sums in the footer. To do this, I first need to create the required number of footer columns. Simple task, but!
I use a drawCallback method *:
drawCallback {
string = innerHTML(needNode).repeat(x_times)
...
}
...and my footer is works.
Then I calculated the page total and I did
window.setTimeout(function(){
$( api.column( columnNumber ).footer() ).html(pageTotal);
},3000);
...but I didn't see any result in empty footer...
What am I doing wrong?
*I cannot use the footerCallback method, because it contain no required object for counting columns.
**If I create a footer manually in HTML, then the right result will be displayed in the correct column. But the footer will be displayed twice: my "tfoot" and automatically created table "dataTables_scrollFoot".
I used the setTimeout() for enough time to create the footer. It works, but does no need effect :(
Help me please. Any help would be appreciated.
...........

XPath selector returns empty list

I'm trying to scrape data from store: https://www.tibia.com/charactertrade/?subtopic=currentcharactertrades&page=details&auctionid=12140&source=overview
There is no problem with getting data from 1st and 2nd table, but when I goes down, xpath returns only empty lists.
even tried to save response in file:
scrapy fetch --nolog "https://www.tibia.com/charactertrade/?subtopic=currentcharactertrades&page=details&auctionid=3475&source=overview" > response.html
for table with skills everything works good
sword = response.xpath('//div [#class="AuctionHeader"]/a/text()').get()
but when it comes to getting for example gold value, I get only empty list:
gold = response.xpath('/html/body/div[3]/div[1]/div[2]/div/div[2]/div/div[1]/div[2]/div[5]/div/div/div[3]/div[2]/div[2]/table/tbody/tr/td/div/table/tbody/tr[2]/td/div[2]/div/table/tbody/tr[3]/td/div/text()').get()
In chrome/firefox both selectors works smooth, but in scrapy only 1st one
I know there might be some problems with data updated by javascript, but it doesn't look like this case
Doesn't look like it's a javascript problem. Think you're not getting your XPATH selectors correct. It's best to be as specific as possible and not to use multiple nodes down. Here we can select the attribute TableContent to get the tables you want. There you can select each individual table that you require if needed.
Code Example
table = response.xpath('//table[#class="TableContent"]')[3]
gold_title = table.xpath('tr/td/span/text()')[2].get()
gold_value = table.xpath('tr/td/div/text()')[2].get()
output
'Gold: '
'31,030'
Explanation
Using the class attribute TableContent, you can select which table you want. Here I've selected the table with the gold values. I've then selected each row and the specific element which has the gold value. The values are hidden behind span and div elements. get() returns a string, getall() returns a list.

How to set a default filter option in Algolia Instant Search

I want to display only certain records from Algolia.For that I need to filter the list with some Ids (which I will get from some other api).The records has to displayed on page load .Is there any option I can use to filter the list that dont reflect in connectCurrentRefinements?
<InstantSearch
searchClient={searchClient}
indexName="STRAPI_SL_CAR"
searchState={this.state.searchState}
onSearchStateChange={this.onSearchStateChange}
>
</InstantSearch>

List store has 2 items while list is showing 5 items

I am trying to implement an autocomplete field. The results are to be shown in a list. But everytime I make a search the new result is appended to the previous results. I tried clearing out the store attached to the list but it didn't work.
In debugger the store shows 2 items while the list shows many items (2 new + the items from previous search results)
Here is the fix:
list.refresh()
After removing the items from the attached store you need to refresh the list to tell it to load itself again.
try calling removeAll() on your store.
Eg.: Just to be sure check before removing
var isStoreLoaded =Ext.getStore("theStore").isLoaded( );
if(isStoreLoaded)
{
Ext.getStore("storeBomSearch").removeAll();
}
I hope this is a normal store, not a treeStore.