Ionic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
License: MIT License
giving me error - ionic-select-searchable/ionic-select-searchable.d.ts, found version 4, expected 3 i have installed npm install ionic-select-searchable@latest --save , please advise
This is your module's package.json -
{
"_from": "ionic-select-searchable@latest",
"_id": "[email protected]",
"_inBundle": false,
"_integrity": "sha512-VMyPqEGOBZXSkCCpOGsXVllwyWlwccqEC7vJ18EPHtSEe5yZxzWLnarLFQPoctdMsRmdjvUDvFpcn08UEE2HYw==",
"_location": "/ionic-select-searchable",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "ionic-select-searchable@latest",
"name": "ionic-select-searchable",
"escapedName": "ionic-select-searchable",
"rawSpec": "latest",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/ionic-select-searchable/-/ionic-select-searchable-1.0.16.tgz",
"_shasum": "48bf20a529f73b261cbfe8309fcf032c88d68c4e",
"_spec": "ionic-select-searchable@latest",
"_where": "F:\\D\\IONIC\\quicktask\\quicktask-20march\\quicktask",
"author": {
"name": "Evgenii Koriakin",
"url": "https://github.com/eakoriakin"
},
"bugs": {
"url": "https://github.com/eakoriakin/ionic-select-searchable/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "An Ionic component similar to ion-select, that allows to search items, including async search and infinite scrolling.",
"homepage": "https://github.com/eakoriakin/ionic-select-searchable#readme",
"keywords": [
"ionic",
"ionic 2",
"ion-select",
"search",
"searchable",
"searchbar",
"select"
],
"main": "ionic-select-searchable.umd.js",
"module": "ionic-select-searchable.js",
"name": "ionic-select-searchable",
"peerDependencies": {
"@angular/core": ">=4.1.3",
"ionic-angular": ">=3.6.0",
"rxjs": ">=5.4.0",
"zone.js": ">=0.8.12"
},
"repository": {
"type": "git",
"url": "git+https://github.com/eakoriakin/ionic-select-searchable.git"
},
"title": "Ionic Select with Searchbar",
"typings": "ionic-select-searchable.d.ts",
"version": "1.0.16"
}
my project's package.json
{
"name": "quicktask",
"version": "2.1.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@ionic-native/calendar": "^4.5.3",
"@ionic-native/core": "^4.3.2",
"@ionic-native/firebase": "^4.4.2",
"@ionic-native/in-app-browser": "^4.5.2",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "^2.0.1",
"angular-linky": "^1.2.2",
"cordova-android": "^6.2.3",
"cordova-browser": "5.0.1",
"cordova-plugin-calendar": "^5.0.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-firebase": "^0.1.24",
"cordova-plugin-inappbrowser": "^1.7.2",
"cordova-plugin-ionic-webview": "^1.1.11",
"cordova-plugin-speechrecognition": "^1.2.0",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-sqlite-storage": "^2.1.2",
"ionic-angular": "3.8.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionic-select-searchable": "^1.0.16",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"time-ago-pipe": "^1.2.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.0.1",
"nl2br-pipe": "^1.0.3",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-firebase": {},
"cordova-sqlite-storage": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-speechrecognition": {},
"cordova-plugin-calendar": {}
},
"platforms": [
"android",
"browser"
]
}
}
my config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="qt.quicktask.starter" version="2.1.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Quick Task</name>
<description>An awesome team management, to do app.</description>
<author email="[email protected]" href="http://sapphireprofits.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />
<allow-navigation href="http://192.168.0.20:8100" />
<plugin name="cordova-plugin-device" spec="^1.1.4" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.11" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="cordova-plugin-firebase" spec="^0.1.24" />
<plugin name="cordova-sqlite-storage" spec="^2.1.2" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.2" />
<plugin name="cordova-plugin-speechrecognition" spec="^1.2.0" />
<plugin name="cordova-plugin-calendar" spec="^5.0.0" />
<engine name="android" spec="^6.2.3" />
<engine name="browser" spec="5.0.1" />
</widget>
Hello please help me I would like to know how to add this plugin on my project ionic3 Ionic 3 Lazy Loading thank you. Sory for my bad expression
I'm able to build AOT with the latest [email protected] but it throws error when using the searchable control:
ERROR Error: Uncaught (in promise): Error: No component factory found for t. Did you add it to @NgModule.entryComponents?
Error: No component factory found for t. Did you add it to @NgModule.entryComponents?
Working fine on regular serve
Hello,
I wanted to know how can i display flag in the listing? Can i define the template of the select items?
If you use NavController to push a new View, IONIC will treat this behavior like we change the View, the ionViewCanLeave will trigger.
It's not make sense for this case, we just open a dialog to choose some items and we don't want to push the new View.
When I need to check the Form is dirty or not I met this issues :
The event ionViewCanLeave will trigger every time this control opened.
My solution is : change from NavController to Modal dialog.
Template parse errors:
Can't bind to 'items' since it isn't a known property of 'select-searchable'.
1. If 'select-searchable' is an Angular component and it has 'items' input, then verify that it is part of this module.
2. If 'select-searchable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
itemValueField="id"
itemTextField="name"
[ERROR ->][items]="ports"
[canSearch]="true"
(onChange)="portChange($event)">
"): ng:///HiremePageModule/HiremePage.html@46:7
Can't bind to 'canSearch' since it isn't a known property of 'select-searchable'.
1. If 'select-searchable' is an Angular component and it has 'canSearch' input, then verify that it is part of this module.
2. If 'select-searchable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
itemTextField="name"
[items]="ports"
[ERROR ->][canSearch]="true"
(onChange)="portChange($event)">
</select-searchable>
"): ng:///HiremePageModule/HiremePage.html@47:7
'select-searchable' is not a known element:
1. If 'select-searchable' is an Angular component, then verify that it is part of this module.
2. If 'select-searchable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ion-item-divider>
<ion-item>
[ERROR ->]<select-searchable
[(ngModel)]="port3"
title="Port"
"): ng:///HiremePageModule/HiremePage.html@41:6
`Error: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'select-searchable'.
Ionic Version:
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.4.0
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
the code is not working on the parent modal. basically i have a pop-up modal for registration and in registration i need a select country modal using select-searchable.
I am having an issue with the modal. Clicking the X button in the top right corner works absolutely fine, but clicking outside, in the grayed out area, will disable it. The modal will close as expected, but then cannot be opened again unless you leave the page and come back.
Let's say i want it to be 50 then 50, not 100 then 100
Hi, first off most grateful for such an awesome plugin.
However, after installing everything, I realised that when a user clicks on an item to select just one, multiple items are selected at a time. I tried the [multiple]="false" feature on the API and it is still not working.
Secondly, is there a way to tweak the styles, for instance, remove the radio buttons?
Thank you and once again biggups for such a great plugin!
How to set default value in select-searchable
Any idea what's going on?
[14:50:00] typescript: src/pages/users/new/users.new.page.module.ts, line: 4
Module '"/Projects/node_modules/ionic-select-searchable/ionic-select-searchable"'
has no exported member 'SelectSearchableModule'.
L3: import {UserNewPage} from "./users.new.page";
L4: import {SelectSearchableModule} from "ionic-select-searchable";
[14:48:17] typescript: src/pages/users/new/users.new.page.ts, line: 12
Module '"/Projects/node_modules/ionic-select-searchable/ionic-select-searchable"'
has no exported member 'SelectSearchableComponent'.
L11: import {AuthService} from "../../../services/auth.service";
L12: import {SelectSearchableComponent} from "ionic-select-searchable";
cli packages: (/Projects/node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v9.2.1
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : /Users/user/Library/Android/sdk
Misc:
backend : legacy
The close button doesn't appears in browser (S.O. windows 10).
Someone knows how can I fix it?
I have this:
<form *ngIf="selectedCustomer" [formGroup]="newClientForm">
<ion-list>
[...]
<ion-item>
<select-searchable
title="State"
[formControl]="newClientForm.controls['stateValue']"
[items]="states"
itemValueField="Stateid"
itemTextField="name"
[canSearch]="true"
(onChange)="stateChange($event)">
</select-searchable>
</ion-item>
[...]
</form>
and:
stateChange(event: { component: SelectSearchable, value: any }){
console.log(event.value);
}
my states:State[] Array is populated on ionViewDidLoad
ionViewDidLoad() {
this.customerSrv.getStates("").subscribe(data=>
{
this.states=data;
},err=>{
this.messageSrv.showErrorToast(err);
});
}
I haven't a selectedState variable... ¿I need one? ¿Where i set the value?
when i select for first time, the value is console-logged and i see it in the form
but when i click again for change the selected item, i see a gray checked icon in the left of all the options. if i select one of these, it value is not console logged, and not changes in the form, even with breakpoints, i can see the stateChange function working after 1st selection.
What i am doing wrong?
It all works perfect, I get the item that i have selected. But everytime I select an item, all items are selected. Although it always returns the selected item.
I don't know how to fix it.
<select-searchable [(ngModel)]="exercise"
[items]="exerciseList"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
multiple="false"
(onChange)="portChange($event)" formControlName="search">
The focus should be configurable option on the following code:
ngAfterViewInit() {
if (this.searchbarComponent) {
// Focus after a delay because focus doesn't work without it.
setTimeout(() => {
this.searchbarComponent.setFocus();
}, 1000);
}
}
I don't want the focus to be set on the search bar when opening since it automatically displays the keyboard.
I need the search bar to search among 5000 items but only show 100 in the list
Hello, I did the fork this package, commited changes, run gulp to build and send push changes to my fork.
So, when I add my fork to my project, the files "are same of the repo, and the dist files dont show".
If I'm copy the dist files and put on npm_modules/ionic-select-searchable the changes works same times.
My question is : How to download dist files when run npm install git://github.com/danielfnz/ionic-select-searchable.
Hi eakoriakin,
thanks for sharing your excellent work
it's not an issue,
can you, please, tell me how to change the text "clear" in something else ?
It would be nice to compound the amount of selection. Something like:
<select-searchable
[title]="'global.fields.game.champions' | translate"
[items]="gameData.champions"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
[multiple]="true"
**[minSelection]="number"**
**[maxSelection]="number"**
>
</select-searchable>
Hello, I'm trying to set value using formBuilder and the value not change on view.
I'm set te id of item on the form.
ex: this.formulario.get('activity_id').setValue(this.activity_id);
Can we display an image along with the select result. I want to display the country flag.
When you compile the application with npm run ionic: build --prod the component does not work correctly, can you see it?
Requesting to add Ionics VirtualScroll capabilities to the select-searchable component.
https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/
hi,
Its working fine in debug mode but when i generate app in prod mode then select searchable plugin not working. nothing open on click select box field
when i am using
ionic cordova build android -debug
then working fine for me.
but using
ionic build android --prod --release
its not working
Hello
To keep the same UI styles, I need to use stacked labels with select-searchable?
It is possible?
Thanks.
I use ionic-select-searchable in my project.
I have received an error when build release for Android but i run ionic serve my project is correct and does not any error
ionic-select-searchable has a problem while build release
error: `$ ionic cordova build android --prod --release
Running app-scripts build: --prod --platform android --target cordova
[16:01:15] build prod started ...
[16:01:15] clean started ...
[16:01:15] clean finished in 2 ms
[16:01:15] copy started ...
[16:01:15] deeplinks started ...
[16:01:15] deeplinks finished in 131 ms
[16:01:15] ngc started ...
[16:01:20] typescript error
Unexpected value 'SelectSearchableModule in
/home/mahdi/apps/jensa/node_modules/ionic-select-searchable/source/select-searchable.module.d.ts' imported
by the module 'AppModule in /home/mahdi/apps/jensa/src/app/app.module.ts'. Please add a @NgModule
annotation.
Error: The Angular AoT build failed. See the issues above
at /home/mahdi/apps/jensa/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
at step (/home/mahdi/apps/jensa/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at Object.next (/home/mahdi/apps/jensa/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/home/mahdi/apps/jensa/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
[16:01:20] copy finished in 5.20 s
`
When you is searching any sentence, the plugin is not converting the key "itemTextField" from "[items]" to lower case.
items = this.selectComponent.items.filter(function (item) { var /** @type {?} */ itemText = _this.selectComponent.itemTextField ? item[_this.selectComponent.itemTextField] : item.toString().toLowerCase(); return itemText.indexOf(filterText_1) !== -1; });
Suggestion: add "toLowerCase()" in line 195
item[_this.selectComponent.itemTextField].toLowerCase();
This plugin have any feature to search an item, and apply "Enter Keyboard" and select the first item in the list. After that close the modal ?
Hi,
I receive this error:
Which attribute is used to add label for "select-searchable-label"
Hi ,
Any solution found for this bug?
Im having an issue where the onSearch method defined in the controller is not being called (might be something stupid on my part).
My code is the following:
<ion-item>
<select-searchable
title="Currencies"
[items]="currencyOptions"
itemValueField="id"
itemTextField="name"
(onSearch)="searchCurrencies($event)"
[canSearch]="true"
[hasInfiniteScroll]="true"
(onInfiniteScroll)="getMoreCurrencies($event)"
(onChange)="currencyChange($event)">
</select-searchable>
</ion-item>
Component({
selector: 'page-watchlist',
templateUrl: 'watchlist.html'
})
export class WatchlistPage extends BaseComponent implements OnInit {
...
searchCurrencies(event: { component: SelectSearchable, text: string }) {
event.component.isSearching = true;
console.log(event.text);
let text = (event.text || '').trim().toLowerCase();
if (!text) {
event.component.items = [];
return;
} else if (event.text.length < 2) {
return;
}
this.socket.sendChannelMessage("currency:search", {"text": text}, (resp) => {
console.log(resp);
event.component.items = resp.data;
event.component.isSearching = false;
});
}
...
}
The onInfiniteScroll & onChange functions fire with no issue. I cant get the onSearch function to fire for the life of me. I haven't delved into the lib code to deeply but will in the AM.
Hi Guys,
I am integrated this package and its very usefull and working perfect. In my current situation, the location selection is showing on the top of the screen.
On loading the page, I need to load the search section of select searchable. which means automatically open the search box..(Dynamically open the search selecteble on load other than taping on screen).
Please help me how to make it with this package.
hy,,,,it run when i open throught the browser but not working when i run through emulator or device android?
scroll infinite - how to search which not fatched
like if any text in last record - like entry 'Santa Cruz' on 44 no row
and search bar type without scroll search 'Santa Cruz' but its not show because scroll not done.
please correct that
How to set default multiple values
hi ,It's working fine , how can i do : itemTextField= object.value (item.address.street) ?
thanks.
after search scroll to top
I tried --prod --aot build in my ionic app with this plugin, but I am getting these errors:
Error at myProject/node_modules/ionic-select-searchable/ionic-select-searchable.d.ts.SelectSearchableComponent.html(7,18): Property '_valueItems' is private and only accessible within class 'SelectSearchableComponent'.
Error at myProject/node_modules/ionic-select-searchable/ionic-select-searchable.d.ts.SelectSearchableComponent.html(12,17): Property '_valueItems' is private and only accessible within class 'SelectSearchableComponent'.
Error at myProject/node_modules/ionic-select-searchable/ionic-select-searchable.d.ts.SelectSearchablePageComponent.html(8,26): Type 'TemplateRef<any>' is not assignable to type 'boolean'.
I have installed latest version of plugin 2.2.1. Can you please solve it in your plugin?
Found this console logs in the plugin.
Could this 2 lines be deleted?
https://github.com/eakoriakin/ionic-select-searchable/blob/cdaab53fe3818c2270fd9b7ff839a3b0f011e684/src/select-searchable.component.ts#L165
https://github.com/eakoriakin/ionic-select-searchable/blob/cdaab53fe3818c2270fd9b7ff839a3b0f011e684/src/select-searchable.component.ts#L166
Thanks .
Hi, how do I bind data coming from http post?
this.carmodels = [];
this.getCarModels();
this.carmodels.push({id:12,name:"Carmodel1"});
this.carmodels.push({id:13,name:"Carmodel2"});
when logged the data in console, more data. but select-searchable only shows the last 2 (Carmodel1, Carmodel2).
I tried moving the last 2 lines inside http success, and it does not show any data anymore.
Thanks
For some reason when multiple/isMultiple is set true, the list items can be tapped (::active state is triggered on the item) but the items are not selecting off/on. Can anyone verify this is not an isolated issue? Bug appears on actual device as well as simulator.
ionic v3.20
ionic-select-searchable 2.2.1
Place each selected item on a separate row, otherwise, items other than the first will be truncated.
New look:
http://prntscr.com/izma6o
Hi,
I'm using the multi-select and after the ok i don't want tot display the picked items but the number of picked items. Is there a way to set it?
Thanks.
i think it will be a good idea to setup a debounce on user input while searching. I am using async and it hits the server on every keyword.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.