This is a migrated thread and some comments may be shown as answers.

Binding the text to a variable?

6 Answers 239 Views
AutoCompleteTextView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Angel
Top achievements
Rank 1
Angel asked on 05 Jul 2017, 06:02 PM

Is there a way to bind whatever I write in the AutoCompleteTextView to a variable and add a placeholder? Checked the API documentation but couldn't find a way to do so. Also tried using ngModel but I get the error "No value accessor for form control with unspecified name attribute".

I'm using NativeScript 3.1 with Angular and UI next version 3.1.0.

6 Answers, 1 is accepted

Sort by
0
Nick Iliev
Telerik team
answered on 06 Jul 2017, 11:38 AM
Hello Angel Ramos,

There is no out-of-the-box functionality which allows you to listen to the text input in your RadAutoCompleteTextView. The reason is that this control is meant to provide a suggestion view while you can use plain textView to implement logic where you can grab the users input. With RadAutoCompleteTextView the main idea is to provide a predefined list of suggestions.
This said one possible workaround would be to entirely separate the UI responsible for entering new suggestions (via TextField or TextView) and use the RadAutoCompleteTextView for the entered suggestion only.

There is another approach and it is to access the native controls and extend the logic behind them. For example, in Android, you get a reference to the native android.widget.EditText (currently AppCompatEdittext which simply extend the base class EditText) and overwrite the textChange events.
e.g.
onAutoCompleteLoaded(args) {
    var autocmp = args.object;
 
    console.log("autocmp: " + autocmp)
 
    var nativeTField = autocmp.android.getTextField();
    console.log("nativeTextField: " + nativeTField) // AppCompatEditText
 
    nativeTField.addTextChangedListener(new android.text.TextWatcher({
 
        afterTextChanged(s) {
            console.log("afterTextChanged");
            console.log(s);
        },
        beforeTextChanged(s, start, count, after) {
            console.log("beforeTextChanged");
            console.log(s);
            console.log(start);
            console.log(count);
            console.log(after);
        },
        onTextChanged(s, start, before, count) {
            console.log("onTextChanged");
            console.log(s);
            console.log(start);
            console.log(before);
            console.log(count);
        }
    }));
}

The solution above is not recommended approach as it will break the main idea of RadAutoCompleteTextView by mixing the standard text view functionality with the suggestion view one and it will also work on Android only. 

Regards,
Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Angel
Top achievements
Rank 1
answered on 07 Jul 2017, 02:25 AM
Hi Nikolay, can you explain a bit more the first solution? Not sure if I understand. I want to have a list of suggestions getting filtered with what I'm writing. I also tried the second solution but for some reason when I assign the to a variable, the variable is not taking the value of s, even though im seeing that the s is changing through the console.log.
0
Nick Iliev
Telerik team
answered on 07 Jul 2017, 09:52 AM
Hi Angel,

If you want to filter the suggestions based on what the user has entered in the text field you can use the exposed completion and suggest modes.

The completion mode has two options: SstartsWith and Contains.

In StartsWith mode, the autocomplete shows only suggestions that start with the typed phrase.
In Contains mode, the autocomplete shows only suggestions that contain the typed phrase.

So using this feature will filter the suggestion without having to write extra code.Real life examples demonstrating the completion mode can be fond here (NativeScript core) and here (NativeScript Angular)


The suggest mode has three options: Suggest, Append and SuggestAppend
More about how the different options works can be found in this article (also real life examples can be found in our SDK application linked above in the previous examples).

Regarding the approach to manually set a default hint (placeholder) value for your text field n the AutoComplte (Android).

If you still need to assign an initial value to your text field that is part of the RadAutomCompleteTextView then you can access the native field and use the native methods to assign the initial value.

e.g. Let's assume that we are working with this example
First, we will need to access the loaded event of our RadAutoCompleteTextView and provide callback
<au:RadAutoCompleteTextView loaded="onAutoCompleteLoaded" >

Now in the code-behind file, we can access the native view and use the native method setText to assign a default value.
export function onAutoCompleteLoaded(args) {
    var autocmp = args.object;
    var nativeTField = autocmp.android.getTextField();
 
    nativeTField.setHint("Enter Country Name"); // default placeholder (hint) value
 
}


Now with setHint, we have set a default hint (placeholder) for our RadAutoCompleteTextView.
The same way you can use the native methods you need (e.g. like setText or other methods) or overwrite the native textChange listeners as shown in my previous post.

Regards,
Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Angel
Top achievements
Rank 1
answered on 08 Jul 2017, 04:10 AM

Hi Nikolay thank you for answering and for providing solutions they are big help. I was having a bit of trouble binding the t from the component inside the TextWatcher, so I tried changing the sample you provided to this: 

nativeTField.addTextChangedListener((text: android.text.TextWatcher) => {
    text.onTextChanged = (s: string, a: number, l: number, o: number) =>{
        console.log(s);
        this.someVariable = s;
    };
});

Didn't have any luck with that. Is this possible? (Binding this into TextWatcher)

0
Nick Iliev
Telerik team
answered on 10 Jul 2017, 06:29 AM
Hello Angel,

When you are overwriting the native listeners using the data conversion techniques you are in fact using plain JavaScript and the scope rules are applied. That means that this would have different context inside the addEventListener callback. To resolve that you can "cache" the reference to this.
e.g
var that = this;
 
nativeTField.addTextChangedListener((text: android.text.TextWatcher) => {
    text.onTextChanged = (s: string, a: number, l: number, o: number) =>{
        console.log(s);
        that.someVariable = s; // using the "cache" reference with that
    };
});


Regards,
Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Angel
Top achievements
Rank 1
answered on 10 Jul 2017, 08:23 PM
Thank you for your help Nikolay that worked.
Tags
AutoCompleteTextView
Asked by
Angel
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Angel
Top achievements
Rank 1
Share this question
or