What is the process for setting up an automatic submission for the "Search" feature?

Question

What is the process for setting up an automatic submission for the "Search" feature?

My Perspective:

@using (Html.BeginForm())
{
    <p id="a">
        Search for VCMEMBRE/VCPARENT: @Html.TextBox("SearchString") 
        <input type="submit" name="searchType" value="Find!" />
    </p>
}

My Handler:

public ActionResult Index(string searchString)
{
    if (!String.IsNullOrEmpty(searchString))
    {
        axeModel.trcubezonequotas = db.TRCUBEZONEQUOTAS.Where(
            (s =>
                   s.VCMEMBRE.ToLower().Contains(searchString.ToLower())
                || s.VCPARENT.ToLower().Contains(searchString.ToLower())
            )
        );
        return View(axeModel);
    }

javascript ajax search model-view-controller entity

Answer 1

Answer №1

Here is an example of how to accomplish this task:

Firstly, in your HTML tag, assign a function to the onChange event:

<input type="text" id="search" onchange="myFunction()" name="searchType" value="Find!" />

Next, define the function that will call your controller method:

For instance:

function myFunction(){
var searchterm = $("#search");
$.get( "your controller url", { searchString: searchterm} )
  .done(function( searchResults) {
    searchResults.each(function( index ) {
       console.log( index + ": " + $( this ).text() );
    });   
  });
}

Answer 2

Here is an example of how to accomplish this task:

Firstly, in your HTML tag, assign a function to the onChange event:

<input type="text" id="search" onchange="myFunction()" name="searchType" value="Find!" />

Next, define the function that will call your controller method:

For instance:

function myFunction(){
var searchterm = $("#search");
$.get( "your controller url", { searchString: searchterm} )
  .done(function( searchResults) {
    searchResults.each(function( index ) {
       console.log( index + ": " + $( this ).text() );
    });   
  });
}

Answer 3

Answer №2

Good day!

I am greatly appreciative of your assistance.

I've made some changes to the code, here it is :

My Perspective:

        @using (Html.BeginForm())
        {
         <p id="a">
        <input type="text" id="search" onchange="myFunction()"  name="searchType" value="Find!" /> 
          </p>
        }

    <script type="text/javascript" language="javascript" >
    function myFunction(){
    var searchterm = $("#search");
    $.get( "Index","SaisieReferentiel", { searchString: searchterm} )
      .done(function( searchResults) {
        searchResults.each(function( index ) {
           console.log( index + ": " + $( this ).text() );
        });   
      });
    }
    </script>

My Controller:

  public class SaisieReferentielController : Controller
    {
    public ActionResult Index(string searchString)
    {
        if (!String.IsNullOrEmpty(searchString))
        {
            axeModel.trcubezonequotas = db.TRCUBEZONEQUOTAS.Where(
                (s =>
                       s.VCMEMBRE.ToLower().Contains(searchString.ToLower())
                    || s.VCPARENT.ToLower().Contains(searchString.ToLower())
                )
            );
            return View(axeModel);
        }
}

However, there seems to be an issue with my JavaScript code: JavaScript runtime error: Object does not support the property or method "each"

Answer 4

Good day!

I am greatly appreciative of your assistance.

I've made some changes to the code, here it is :

My Perspective:

        @using (Html.BeginForm())
        {
         <p id="a">
        <input type="text" id="search" onchange="myFunction()"  name="searchType" value="Find!" /> 
          </p>
        }

    <script type="text/javascript" language="javascript" >
    function myFunction(){
    var searchterm = $("#search");
    $.get( "Index","SaisieReferentiel", { searchString: searchterm} )
      .done(function( searchResults) {
        searchResults.each(function( index ) {
           console.log( index + ": " + $( this ).text() );
        });   
      });
    }
    </script>

My Controller:

  public class SaisieReferentielController : Controller
    {
    public ActionResult Index(string searchString)
    {
        if (!String.IsNullOrEmpty(searchString))
        {
            axeModel.trcubezonequotas = db.TRCUBEZONEQUOTAS.Where(
                (s =>
                       s.VCMEMBRE.ToLower().Contains(searchString.ToLower())
                    || s.VCPARENT.ToLower().Contains(searchString.ToLower())
                )
            );
            return View(axeModel);
        }
}

However, there seems to be an issue with my JavaScript code: JavaScript runtime error: Object does not support the property or method "each"

What is the process for setting up an automatic submission for the "Search" feature?

Answer №1

Answer №2

Similar questions

Setting up Node JS with the essentials

Create type definitions for React components in JavaScript that utilize the `prop-types` library

Utilizing the dollar shorthand for jQuery in conjunction with Selenium

Formatting dates in JavaScript

Passing a ref from a parent component to a child component in reactjs

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

Determine the location of an image with the help of Jquery

Unlocking React Event Handlers using Puppeteer

Javascript isn't being executed by Internet Explorer as expected

What is the best approach to configure Nuxt.js to recognize both `/` and `/index.html` URLs?

Update or Delete BreezeJS EntityManager After Losing Instance Reference

How to make Sails.js package accessible across all modules

Transmission of data between tabs within an AJAX tab container in ASP.net

The impact of React-router's history within the connect function of the react-redux provider

How can the jsoncallback argument enhance the functionality of .getJSON()?

What is the solution for handling undefined errors that occur when employing d3.select(this) within a Vue methods hook?

Using Ajax to send data to a model within another model in ASP.NET Core MVC

The jQuery .on("change") function keeps triggering repeatedly, but I'd like it to only execute once

Form values not being transmitted correctly in Ajax POST request

The jQuery date picker is showing an error with the function daySettings[2].replace, indicating that