The input field with id="_search_main_ledger_id" is part of a dynamic Real-time Search (Auto-suggest) system. It allows the user to search for a "Supplier" (Ledger) by typing its name, ID, or phone number.

Here is a breakdown of how the data flows from the controller to the view:

User Input: When you type in the field #_search_main_ledger_id, a jQuery keyup event is triggered in

main.js

AJAX Request: The JavaScript gathers the text you typed and sends an asynchronous (AJAX) GET request to the Laravel route /main-ledger-search.

Controller Processing:

The request reaches AccountLedgerController@mainLedgerSearch.

The controller queries the

AccountLedger  table.

It filters the results based on the form type (e.g., if it's a purchase form, it only shows suppliers where _is_purchase_form = 1).

The results are returned as a JSON object.

JavaScript Rendering: The JavaScript receives the JSON data, loops through the findings, and generates an HTML table. This table is then injected into the <div class="search_box_main_ledger"> located right below your input field.

Selection: When you click on a result in the list:

The Ledger ID is saved into a hidden input field (#_main_ledger_id).

The Ledger Name is displayed in the #_search_main_ledger_id input field.

Other details like "Address" and "Phone" are automatically filled into their respective fields.

sequenceDiagram

    participant User as User (Browser)

    participant JS as main.js (jQuery)

    participant Route as web.php (Routes)

    participant Controller as AccountLedgerController

    participant Model as AccountLedger Model

    participant DB as Database (Table: account_ledgers)

    User->>JS: Types Supplier Name/Phone

    JS->>Route: GET /main-ledger-search?_text_val=...

    Route->>Controller: Calls mainLedgerSearch()

    Controller->>Model: Query records matching search text

    Model->>DB: SELECT * WHERE _name LIKE %text% ...

    DB-->>Model: Matching records

    Model-->>Controller: Collection of Ledgers

    Controller-->>JS: JSON Data (id, _name, _phone, etc.)

    JS->>User: Renders search results in .search_box_main_ledger

    User->>JS: Clicks a result row

    JS->>User: Updates #_main_ledger_id (hidden) and #_search_main_ledger_id

Key Code Snippets

The View (Blade) Located in  backend/purchase/create.blade.php

Html

<input type="text" id="_search_main_ledger_id" class="form-control" placeholder="Supplier">

<input type="hidden" id="_main_ledger_id" name="_main_ledger_id"> <!-- This ID is sent to the server on Save -->

<div class="search_box_main_ledger"> </div> <!-- Search results appear here -->

Javascript main,js

$(document).on('keyup', '._search_main_ledger_id', delay(function(e) {

    Var _text_val = $(this).val().trim();

    var  action_url = project_base_url + "/main-ledger-search";

    $.ajax({

        url: action_url,

        method: "GET",

        data: { _text_val: _text_val },

        dataType: "JSON",

        success: function(result) {

            // Generates the table and shows it in the div

        }

    });

}, 500));

AccountLedgerController.php:

public function mainLedgerSearch(Request $request) {

    $datas = AccountLedger::select('id','_name','_code','_address','_balance','_phone')

        ->where('_name', 'like', "%{$request->_text_val}%")

        ->orWhere('_phone', 'like', "%{$request->_text_val}%")

        ->get();

    return json_encode($datas);

}

Javascript main,js

$(document).on('keyup', '._search_main_ledger_id', delay(function(e) {

    Var _text_val = $(this).val().trim();

    var  action_url = project_base_url + "/main-ledger-search";

    $.ajax({

        url: action_url,

        method: "GET",

        data: { _text_val: _text_val },

        dataType: "JSON",

        success: function(result) {

            // Generates the table and shows it in the div

        }

    });

}, 500));

আপনি যে $ চিহ্ন দেখছেন, এটি সাধারণত JavaScript-এ jQuery library ব্যবহার করার সময় ব্যবহৃত হয়। নিচে সহজভাবে ব্যাখ্যা করছি।

অর্থাৎ $ এবং jQuery একই জিনিস।

$ মানে jQuery function call করা।

$(document).ready(function(){

});

var _text_val = $(this).val().trim();

$(this) = যে input box এ user টাইপ করছে

.val() = input এর value নেওয়া

.trim() = সামনে পিছনের space remove করা

var action_url = project_base_url + "/main-ledger-search";

এখানে একটি API URL তৈরি হচ্ছে

ধরুন

project_base_url = http://localhost/project

তাহলে

action_url = http://localhost/project/main-ledger-search

এই URL এ request যাবে।

$.ajax({

AJAX = Asynchronous JavaScript And XML

এর কাজ

👉 Page reload না করে server থেকে data আনা

PROCESS

User typing

      ↓

keyup event

      ↓

0.5 sec delay

      ↓

AJAX request server এ যায়

      ↓

Server ledger search করে

      ↓

JSON data return করে

      ↓

Javascript table তৈরি করে

      ↓

Result screen এ show হয়

VISUAL FLOW

User typing

      ↓

keyup event

      ↓

delay 500ms

      ↓

get input value

      ↓

AJAX request

      ↓

Server search

      ↓

JSON response

      ↓

Table generate

      ↓

Display result

HTML

<input type="text" id="name">

Javascript

$("#name")

$ = jQuery

$() = HTML element select

$.ajax() = server request

Html tag gulo kay element bolay

    <input type="text" id="name">