set one textbox value dynamically while change on another textbox in jquery

Question

I am trying to do something like asp.net textchanged event using jquery. when i change one tetbox value using autocomplete there will be change on another textbox . data will come from my database. suppose i have two textbox txtOne and TxtTwo. when i change txtone using autocomplete txtTwo value will change accorindg to txtOne from database. here is my code. what am i doing wrong? how could i achieve Autocomplete and Textchange event in same textbox in mvc.

 @Html.TextBoxFor(model => model.ITEMNM, htmlAttributes: new { @class = "form-control", id = "txtOne" })
 @Html.TextBoxFor(model => model.ITEMNM, htmlAttributes: new { @class = "form-control", id = "txtTwo" })

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $('#txtOne').autocomplete(
        {
            source: '@Url.Action("TagSearch", "RMS_ITEM")'
        });
    });

    $(function () {
        $('#txtOne').change(function () {
            var changedText = $("#txtOne").val();

            $.post('@Url.Action("ItemNameChanged","RMS_ITEM")', { "ChangedText": changedText });

        });
    });

</script>

here is my controller code

[HttpPost]
public ActionResult ItemNameChanged(string changedText)
{
    var result = (from n in db.PosItemMstDbSet
                  where n.CATNM == changedText
                  select new
                  {
                      catid = n.CATID

                  }
                );

    foreach (var n in result)
    {
        ViewBag.itemId = n.catid;
    }
    //return changedText + " was submitted!";
    return null;
}

public JsonResult TagSearch(string term)
{
    var compid = Convert.ToInt16(System.Web.HttpContext.Current.Session["loggedCompID"].ToString());


    var tags = from p in db.PosItemMstDbSet
               where p.COMPID == compid
               select p.CATNM;

    return this.Json(tags.Where(t => t.StartsWith(term)),
                    JsonRequestBehavior.AllowGet);
}

Answer 1

well I have solved my problem. thanks to everyone...

here is my script code

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $('#txtItemNm').autocomplete(
        {
            source: '@Url.Action("TagSearch", "RMS_ITEM")',
            change: txtOneChanged
        });
    });

    function txtOneChanged()
    {

        var changedText = $("#txtItemNm").val();
        var txtBox = document.getElementById('catid');



        $.getJSON(
        "/RMS_ITEM/ItemNameChanged", { "ChangedText": changedText },
        function (myData) {
            txtBox.value = myData;
        });
    }
</script>

here is my controller methods

[AcceptVerbs(HttpVerbs.Get)]
        public JsonResult ItemNameChanged(string changedText)
        {
            var compid = Convert.ToInt16(System.Web.HttpContext.Current.Session["loggedCompID"].ToString());
            var itemId = "";



            var rt = db.PosItemMstDbSet.Where(n => n.CATNM == changedText &&
                                                         n.COMPID == compid).Select(n => new
                                                         {
                                                             catid = n.CATID
                                                         });
            foreach (var n in rt)
            {
                itemId = n.catid;
            }
            return Json(itemId, JsonRequestBehavior.AllowGet);

        }

        public JsonResult TagSearch(string term)
        {
            var compid = Convert.ToInt16(System.Web.HttpContext.Current.Session["loggedCompID"].ToString());


            var tags = from p in db.PosItemMstDbSet
                       where p.COMPID == compid
                       select p.CATNM;

            return this.Json(tags.Where(t => t.StartsWith(term)),
                            JsonRequestBehavior.AllowGet);
        }

Answer 2

You need to define the change option for the autocomplete call:

$("#txtOne").autocomplete(
{
  source: '@Url.Action("TagSearch", "RMS_ITEM")'
  change: txtOneChanged
});

function txtOneChanged()
{
    // your custom code
}

Check out this JSFiddle:

http://jsfiddle.net/w1vs0rqn/