Voice input does not refresh search text area

At the moment, my search function utilizes cordova-based voice recognition.

Here is the HTML code:

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search"  ng-model="search" id="in" placeholder="Search">
    </label>
    <button class="button button-small" ng-click = "recognizeSpeechSearch()">
    <i class="icon ion-mic-a"></i>
    </button>
  </div>

And here is the JavaScript code:

$scope.recognizeSpeechSearch = function(){
            var maxMatches = 1;
            var promptString = "Speak now"; // optional
            var language = "ms-MY";                     // optional

            window.plugins.speechrecognizer.startRecognize(function(result){
                alert(result);
                    $scope.search = result;

            }, function(errorMessage){
                console.log("Error message: " + errorMessage);
            }, maxMatches, promptString, language);
        }

However, I am facing an issue where the input provided through voice does not update in my search text area and perform search filter. Can anyone provide assistance on this matter? Thank you.

Answer №1

The callback functions are performing outside the Angular environment. To ensure they work within Angular's scope, you must utilize $apply() like so:

    window.plugins.speechrecognizer.startRecognize(function(result){
$scope.$apply(fuction() {
    alert(result); $scope.search = result;}) 
;}, function(errorMessage){ 
console.log("Error message: " + errorMessage); }, maxMatches, promptString, language);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Format the date using moment() for the last week of the current year and return it with the year. Next year's

I encountered an unusual problem when using Moment.js with Angular.js. When I use the .toISOString() method, I get the correct date, but when I use the .format() method, the date is completely wrong. Here is an example to illustrate the issue: Code snip ...

I struggle to grasp the significance of the scene's positioning

I've been experimenting with some sample code using three.js, where I've created a plane and I want it to rotate around. Here's a snippet of my code: This is the setup for my camera: var camera = new THREE.PerspectiveCamera(70, window.inner ...

Utilizing key values to access an array and generate a list of items in React.js

This marks my initiation on Stack Overflow, and I extend an apology in advance for any lack of clarity in my explanation due to unfamiliarity with the platform. My current task involves creating a resume with a dynamic worklist feature on my website. The ...

Route.post() is in need of a callback function, however, it was provided with an [object String

I've been working on developing my own vocabulary app by following and modifying the MDN node/express tutorial. While the MDN tutorial runs smoothly, I'm encountering issues with my version. Below are the errors I'm facing: Error: Route.p ...

"Using axios and async/await in VUE.JS to perform multiple asynchronous GET

Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

How can you implement a delete button in jQuery DataTables using an API?

Is there a way to incorporate the delete button using the jQuery DataTables API? I have successfully installed the DataTable but am facing challenges in implementing the necessary methods. Any assistance would be greatly appreciated. Thank you! Visit thi ...

Cookie authentication with Wp-api 2

I'm currently working on a php page within WordPress (using WP-Api 2): <?php /** * Template Name: WP-Api */ add_action("wp_enqueue_scripts", "enqueue_"); function enqueue_() { wp_localize_script( 'wp-api', 'wpApiSettings&apos ...

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

What could be causing the failure of opening a link within an asynchronous handler on iPad Safari?

Have you ever encountered some unusual behavior when programmatically opening a _blank link? It's happening to me and I'm not quite sure why. Context: Device: iPad 14 Browser: Safari latest I have a button that triggers an async await operatio ...

Webpack and terser reveal the names of the source files in the compressed output

Is there a way to stop source filenames from appearing in webpack output even when using Terser for minification? Illustration After minifying my production React app build, the resulting .js output file still contains original source filenames rather th ...

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

Switch between Accordions/Tabs with JavaScript (ES6)

Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...

Why is adding a div to Facebook posts using JQuery failing due to dynamic loading?

I have been experimenting with the mouseover feature to enhance a Facebook group by adding additional content. Upon testing the DIV class, I realized that after the initial 10 or so instances of DIVs with the class storyInnerWrapper, the text stopped being ...

Strategies for managing a sizable td Input element in a Table that undergoes re-rendering whenever there is a change in state in React

I'm not entirely certain if this is the best practice for rendering a table element in React, but it's what I've been doing consistently. The for loop below will be executed each time a re-render occurs, or when there is a change in input. W ...

Creating enduring designs in Next.js

I've been diving into this amazing article and I'm puzzling over the implementation of persistence in Option 4. It seems like you would need to redefine the .getLayout method for each page. I'm uncertain about how nesting logic is handled fo ...

After attempting to follow a guide, I encountered a scenario where a view was returning None because the is_ajax function was not

After diving into the world of ajax, I encountered a puzzling issue that I can't seem to crack. My hunch is that it involves the comment_id versus the blog_id. (I was following this tutorial: https://www.youtube.com/watch?v=VoWw1Y5qqt8&list=PLKILt ...

javascript how to retrieve the custom attribute value of an HTML style

I am dealing with an HTML element that has some inline styles as well as a custom CSS property. I am able to access every style attribute except for my custom style property. Here is the code I am working with: <img id="myimg" class="ImgClass" style=" ...

Guide to inserting .json data into a .js file

Currently, I have an HTML5 banner designed using Flash CC. However, the platform in which I am showcasing this ad does not support JSON files. I am looking for a way to transfer the information from the JSON file into either my .html or .js file so that ...

casperjs is encountering difficulty locating the id even after setting it

Issue with CasperJS not locating the ID after setting it Casper.then(function () { screenLog(); var id = String("_newid_"); var arrow = this.evaluate(function () { var arrows = document.querySelectorAll('span.select2-selection__a ...