I need to update Listview when in textinput typed > 2 symbols. I get data from API, and every new symbol after 2 chars must update suggested variants (new datasource). Can't find my mistake. Will be very grateful for solution :)
Source code:
https://rnplay.org/apps/msxitg
The mistake is on row 54:
API_RESPONSE_ARRAY = responseJSON.result.items.name;
responseJSON.result.items is list of objects that have name key. You have to change this to following and it will work:
API_RESPONSE_ARRAY = responseJSON.result.items.map((item) => item.name);
Forked version that works can be found from here https://rnplay.org/apps/WDXSHw
ps. maybe you know it but as it is you don't need the componentWillReceiveProps function and it's not called at all currently.
Related
I have successfully implemented react-native-cn-richtext-editor with limited toolbar functions.
I want to know that, how to get value (text that we have typed) from editor.
I am new in RN, have tried to get value but didn't get success. How can I resolve this issue, as I want to sent this text to server and then do further process.
In given example of this library there is method onValueChange on change the content object is present in value and to extract the value below example is there
onValueChanged = (value) => {
console.log(value[0].content[0].text)
}
Finally I got the solution of above question.
convert the value in HTML with convertToHtmlString write following command,
let html = convertToHtmlString(this.state.value)
for more details refer this github link
I am using ionic 4. I want to do search function in my apps. I am using search bar and get the result from API.
My problem is it always output duplicate result.
One problem is I haven't typing the word finish it already match the result that I want to search, then it will output the result.
Another problem is when I finish typing it output again the result.
How can I solved or avoid this problem?
Here is my html code:
<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>
Here is my home.page.ts
Search() {
this.myService.getSearch(this.name);
}
The second one sounds like you are not wiping the data in your this.myService.getSearch call - check what it does in there, is it starting from a new list or just returning more results? If that doesn't solve that issue then post the code for that section.
The first issue is by design.
You can slow this down with the debounce option:
<ion-searchbar debounce="1500"></ion-searchbar>
There are two input events you can experiment with ionChange and ionInput - they act differently but I cannot remember exactly which does which, you will have to try them both. A third option would be to handle neither of them and just use a submit button.
I try to used #shoutem/ui! In my project, I define 1 Component with header is NavigationBar of #shoutem/ui, in NavigationBar I try define rightComponent is an DropDownMenu, but when long content, navigation bar will made 2 line and I don't want that way! I'm still want it pingleline!
That's what I'm facing:
Please Help.
It seems that this PR https://github.com/shoutem/ui/pull/216/files solves it, so please check if you are using the latest version of #shoutem/ui.
Hai i am struggling with keyboard problem in android, when i want to type any thing in text input it show some suggestions in keyboard, I don't want those suggestions, Can any one help me that how to avoid those suggestions.
Any help much appreciated, the above image from nexus 6.
Here is my TextInput code
<TextInput
style={styles.TextInput}
value={this.state.currentWord}
onChangeText={(text) => this.setState({currentWord:text.trim()})}
placeholder="Type Your word here"
autoCapitalize='characters'
autoCorrect={this.state.autoCorrect}
autoFocus={this.state.autoFocus}/>
In state i declare autoCorrect to be false
When using autoComplete="false", React native sets the underlying native android input type to TYPE_TEXT_FLAG_NO_SUGGESTIONS and clears out TYPE_TEXT_FLAG_AUTO_CORRECT, effectively telling the system not to offer any suggestions (see source code). This is the recommended way of disabling text suggestions per the Android reference guides.
The problem is it appears that some (or many?) HTC devices do not honor this setting. From my research, it appears some Samsung devices might not support this either. It is reasonable to assume that other manufactures will not honor this setting - which flat out just sucks. This is one of the big problems with Android - somehow they didn't learn from Microsoft - that sleazy manufacturers will destroy the reliability of your products and it takes years (a decade, roughly) to even begin to undo the damage </rant>. (note: I'm an Android fan).
According to Daniels answer it appears someone had success setting the text type to use TYPE_TEXT_VARIATION_FILTER - which tells the device that your input is being used to filter a list of items. Lets try to modify the existing text input and see if it works - then you can build our own if you want:
You need to find the file ReactTextInputManager.java. From the React Native folder, it will be located at this path:
[react-native]/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
Around line 378 you will find a method called setAutoCorrect - update it to the following:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER))
: 0);
}
Build your app and test. If it doesn't work, try removing both instances of InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | (including the pipe) from the above code and try again. If that doesn't work, I think you're out of luck.
If it does work, then you can either a) instruct everyone on your team how to modify the react native component before building (hacky and unreliable), or b) build your own text input component. You should be able to copy and paste the existing TextInput code and shouldn't have to write much native code at all - mostly just renaming things. Good luck.
Update: going further down the rabbit hole, you can also try the setting TYPE_TEXT_VARIATION_VISIBLE_PASSWORD. So here is the kitchen sink - I'm assuming you can read the code well enough to play around with different combinations of input types:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD))
: 0);
}
It helps to understand that the method signature for updateStagedInputTypeFlag is the following:
updateStagedInputTypeFlag([view], [flagsToUnset], [flagsToSet]);
Update 2: There are lot's of "input type" flags you can use, see a full list here. Feel free to try others - you might stumble upon one that works. You should be able to modify the code from my first update above.
if anyone has this problem, setting autoCorrect=false and keyboardType="visible-password" hides the suggestions in android
You can set the TextInput to Set autoCorrect to false.
You would have to write your own Android TextView wrapper, that sets the correct input type. See this stack overflow post for more information on the android part.
My solution was using keyboardType={'visible-password'} when the password is visible
<TextInput
onChangeText={onChangeText}
label={label}
autoCapitalize='none'
value={password}
secureTextEntry={isPasswordVisibile}
keyboardType={this.state.isPasswordVisibile ? undefined : 'visible-password'}
/>
Our fix/hack was to simply change the input`s type from text to email and back to text.
I am using bootstrap-datepicker and getting an issue.
When I click a day, it works well，but when I click the same day again. The selection gets cancelled
The boostrap datepicker demo works well.
I had found the example for bootstrap date picker from the above link.
It's a known issue. Here is a workaround for this issue.
https://github.com/eternicode/bootstrap-datepicker/issues/816
jsfiddle the issue: http://jsfiddle.net/antonkruger/fpgseobz/
Once I've tried it, I'll post an update.
Update:
Yes it works.
In the defaults # line 1394, add a new option, allowDeselection
var defaults = $.fn.datepicker.defaults = {
allowDeselection: false,
...
};
In the _toggle_multidate function # line 1015, modify the "else if (ix !== -1)" statement to:
else if (ix !== -1 && this.o.allowDeselection){
this.dates.remove(ix);
}
I came across this issue myself so if you still need this. trick is to store the current date in a variable each time a new date is created. If the new date is undefined (empty) update date with the temporary variable. I know its a dirty solution, but hey atleast its working.
I wrote a little fiddle enter code herehttp://jsfiddle.net/d86msex1/
Goodluck!
There's now an official way to accomplish this:
$element.datepicker('remove');
source: http://bootstrap-datepicker.readthedocs.org/en/release/methods.html#remove