StockVolt™ | Real-Time Electronic Component Inventory & Pricing

<!DOCTYPE html>
<html>
  <head>
    <title>Search Box Example</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css"/>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>

#card-title{font-family: 'Instrument Sans', sans-serif !important;
  font-size: 2rem !important;}
      @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&family=Open+Sans&display=swap");
      .check-stock { background:#fff; padding:20px; min-height:auto; font-family:"Open Sans",sans-serif; }
      #res-error { text-align:center; margin-top:20px; color:red; }
      .distributor-stock { display:flex; flex-direction:column; justify-content:center; align-items:center; width:70%; margin:0 auto; }
      .distributor-stock p { text-align:center; }
      #search-box { display:flex; margin-bottom:10px; font-family:inherit; width:100%; position:relative; }
      #search-input { flex:1; padding:5px; background:#f5f5f5; outline:none; border:none; border-radius:.2rem 0 0 .2rem; font-family:inherit; width:100%; height:calc(1.5em + .75rem + 2px); padding:.375rem .75rem; font-size:1rem; font-weight:400; line-height:1.5; color:#495057; }
      #search-button { padding:5px 10px; background-color:#000; color:#fff; border:none; cursor:pointer; font-family:inherit; }
      #pagination { display:flex; justify-content:center; align-items:center; text-align:center; margin-top:10px; font-family:inherit; }
      #results-table { border-collapse:collapse; margin-top:20px; font-family:inherit; width:100%; }
      #results-table th { font-family:"League Spartan",sans-serif; }
      #results-table th, #results-table td { border:1px solid #ddd; padding:8px; }
      .loader { border:4px solid #f3f3f3; border-top:4px solid #7cb342; border-radius:50%; width:30px; height:30px; animation:spin 2s linear infinite; margin:20px auto; display:none; position:relative; }
      .loader-message { position:absolute; top:30; left:42%; margin:20px auto; }
      .top-card { display:flex; justify-content:left; margin:10px; padding:10px; border:0px solid #ddd; border-radius:5px; background-color:#f9f9f9; }
      .prduct-card { display:none; }
      .prduct-card.visible { display:flex; flex-direction:column; padding-bottom:20px; }
      .card-disc { padding-left:20px; }
      h2#card-title { margin:0; }
      .top-card img { max-height:100px; max-width:100%; }
      .top-card h3 { margin-top:0; font-size:18px; font-weight:bold; }
      .top-card p { margin-bottom:5px; font-size:16px; font-weight:700; }
      .top-card span { font-size:14px; opacity:.5; }
      .card-btn { padding:.5rem .1rem; font-size:1rem; line-height:1.5; border-radius:0px; display:inline-block; font-weight:400; background-color: #CE0014 ; color:#fff; text-align:center; user-select:none;  border:1px solid transparent; padding:.5rem 1.5rem; font-size:1rem; line-height:1.5; border-radius:0px; cursor:pointer; margin-left:10px; margin-bottom:20px; text-decoration:none; border:none; }
      .card-btn i { font-size:1rem; margin-right:12px; }
      .buy-btn { background-color:#CE0014 color:#fff; padding:0.5rem 1rem !important; font-size:0.75rem !important; line-height:1.5; border-radius:0px !important; width:200px; text-decoration:none; }
      .dataTables_length { margin-bottom:10px; }
      .product-card-action { display:flex; flex-direction:row; align-items:center; justify-content:left; }
      .top-card a { display:block; text-align:center; margin-top:10px; font-weight:bold; color:#fff; background-color:#4caf50; padding:5px 10px; border-radius:5px; text-decoration:none; }
      .suggestions { position:absolute; top:50px; left:0px; border-radius:0px; background:#f5f5f5; width:100%; z-index:123; }
      .suggestion-item { padding:5px 20px; cursor:pointer; border-bottom:1px solid #f1e6e6; }
      .suggestion-item:hover, .suggestion-item.selected { color:#495057; border-left:2px solid black; }
      @keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} }
      #results-table { width:100%; border-collapse:collapse; }
      #results-table th, #results-table td { padding:8px; border:1px solid #e8f0fe; font-size:14px; }
      #results-table th { background-color:transparent; border:none; }
      table.dataTable.display tbody tr:hover { background-color:#f9f7e5 !important; }
      @media only screen and (max-width:768px){ .card-btn{padding:.275rem .75rem;} .product-card-action{width:300px;} .top-card{display:flex; flex-direction:column; justify-content:left; padding-left:0;} .distributor-stock{width:100%;} }
      @media screen and (max-width:600px){
        #results-table{ overflow-x:auto; display:block; }
        #results-table thead, #results-table tbody, #results-table th, #results-table td, #results-table tr{ display:block; }
        #results-table thead tr{ position:absolute; top:-9999px; left:-9999px; }
        #results-table tr{ border:1px solid #ccc; }
        #results-table td{ border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; }
        #results-table td:before{ position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; content:attr(data-label); font-weight:bold; }
      }
      .mobile-layout{ display:none; }
      @media (max-width:600px){ #results-table, #results-table_wrapper{ display:none !important; } .mobile-layout{ display:block; } }
      .mobile-item{ border:1px solid #ccc; margin:10px; padding:10px; display:flex; flex-direction:column; }
      .mobile-logo img{ max-height:50px; max-width:50px; }
      .mobile-common-name{ font-weight:bold; }
      .mobile-stock{ margin-top:5px; }
      .mobile-prices{ display:flex; justify-content:space-between; margin-top:5px; }
      .buy-btn{ margin-top:10px; background: #CE0014; color:#fff; padding:5px 10px; text-align:center; border-radius:5px; text-decoration:none; display:inline-block; width:fit-content; }
    	.paragraph-stockvolt{max-width:500px;}
    </style>
  </head>
  <body>
    <div class="check-stock">
      <div class="distributor-stock">
        <p>Formally known as StockVolt™</p>
        <h2>Global Inventory Search</h2>
        <p class="paragraph-stockvolt">Search a manufacturer part number to compare inventory directly from 130+ component distributors around the world</p>
        <div id="search-box">
          <input type="text" id="search-input" placeholder="Search a Manufacturer Part Number" autocomplete="off"/>
          <div class="suggestions" id="suggestionsContainer"></div>
          <button id="search-button"><i class="ri-search-line"></i></button>
        </div>
      </div>

<div class="prduct-card">
        <div class="top-card">
          <img src="" id="card-img" alt="" srcset=""/>
          <div class="card-disc">
            <h2 id="card-title"></h2>
            <p id="card-description"></p>
            <span id="card-info"></span>
          </div>
        </div>
        <div class="product-card-action">
          <a id="datesheet" class="card-btn" href="#" target="_blank"><i class="ri-file-pdf-line"></i>Download Datasheet</a>
          <a id="buynow" class="card-btn" href="#" target="_blank"><i class="ri-stock-line"></i>Buy Now</a>
        </div>
      </div>

<table id="results-table" class="display responsive table" style="display:none">
        <thead>
          <tr>
            <th>Distributor</th>
            <th>Dist Name</th>
            <th>MOQ</th>
            <th>Packaging</th>
            <th>Dist Country</th>
            <th>Lead Time</th>
            <th>Stock</th>
            <th>Order Pricing</th>
            <th style="visibility:hidden">................</th>
          </tr>
        </thead>
        <tbody id="results-body"></tbody>
      </table>

inputField.addEventListener("input", async () => {
        const inputText = inputField.value;
        suggestionsContainer.innerHTML = "";
        selectedSuggestionIndex = 0;

if (inputText.length >= 3) {
          lastSearchTerm = inputText;

if (cachedSuggestions.length === 0 || lastSearchTerm !== inputText) {
            try {
              const response = await fetch(
                `https://beta.api.oemsecrets.com/partsearch?searchTerm=${encodeURIComponent(inputText)}&apiKey=21ryrlgqwzj5dyqwrmpnv75x6dh3h01csvh3lvrlssbe9uh04nv76yvo3ecpm9nb`
              );
              const data = await response.json();
              cachedSuggestions = data.stock.map((item) => item.part_number);
            } catch (error) {
              console.error("Error fetching suggestions:", error);
              return;
            }
          }

const filteredSuggestions = cachedSuggestions.filter((suggestion) =>
            suggestion.toLowerCase().includes(inputText.toLowerCase())
          );

const bestMatchedSuggestions = [...new Set(filteredSuggestions)].slice(0, 5);
          bestMatchedSuggestions.forEach((suggestion) => {
            displaySuggestion(suggestion);
          });

if (bestMatchedSuggestions.length > 0) {
            suggestionsContainer.scrollTop = 0;
          }
        } else {
          cachedSuggestions = [];
          lastSearchTerm = "";
        }
      });

inputField.addEventListener("keydown", (event) => {
        const suggestionItems = suggestionsContainer.getElementsByClassName("suggestion-item");

if (event.key === "ArrowDown") {
          event.preventDefault();
          if (suggestionItems.length > 0) {
            if (selectedSuggestionIndex >= 0) {
              suggestionItems[selectedSuggestionIndex].classList.remove("selected");
            }
            selectedSuggestionIndex = (selectedSuggestionIndex + 1) % suggestionItems.length;
            suggestionItems[selectedSuggestionIndex].classList.add("selected");
            inputField.value = suggestionItems[selectedSuggestionIndex].innerText;
          }
        } else if (event.key === "ArrowUp") {
          event.preventDefault();
          if (suggestionItems.length > 0) {
            if (selectedSuggestionIndex >= 0) {
              suggestionItems[selectedSuggestionIndex].classList.remove("selected");
            }
            selectedSuggestionIndex = (selectedSuggestionIndex - 1 + suggestionItems.length) % suggestionItems.length;
            suggestionItems[selectedSuggestionIndex].classList.add("selected");
            inputField.value = suggestionItems[selectedSuggestionIndex].innerText;
          }
        }
      });

function displaySuggestion(suggestion) {
        const suggestionItem = document.createElement("div");
        suggestionItem.innerText = suggestion;
        suggestionItem.classList.add("suggestion-item");
        suggestionItem.addEventListener("click", () => {
          inputField.value = suggestion;
          suggestionsContainer.innerHTML = "";
          inputField.focus();
          selectedSuggestionIndex = 0;
          performSearch();
        });
        suggestionsContainer.appendChild(suggestionItem);
      }

$(document).ready(function () {
        const searchInput = $("#search-input");
        const searchButton = $("#search-button");
        const resultsTable = $("#results-table");
        const resultsBody = $("#results-body");
        const loader = $("#loader");
        const paginationContainer = $("#pagination");
        const errorContainer = $("#res-error");
        const loaderMessage = $("#loader-message");
        const mobileLayout = $("#mobile-layout");

let dataTable = null;

function simulateCtrlClick(element) {
          const event = new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true });
          element.dispatchEvent(event);
        }

const downloadButton = document.getElementById("datesheet");
        if (downloadButton) {
          downloadButton.addEventListener("click", function (event) {
            event.preventDefault();
            simulateCtrlClick(downloadButton);
          });
        }

const dataTableConfig = {
          ordering: true,
          order: [],
          language: {
            responsive: true,
            emptyTable: "No data available",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            lengthMenu: "Show _MENU_ entries",
            search: "Search:",
            zeroRecords: "No matching records found",
            paginate: { first: "First", last: "Last", next: "Next", previous: "Previous" }
          },
          columnDefs: [
            {
              targets: 6,
              orderable: true,
              type: "num"
            }
          ]
        };

searchButton.click(function () { performSearch(); });
        searchInput.keypress(function (e) { if (e.which === 13) { performSearch(); } });

function performSearch() {
          suggestionsContainer.innerHTML = "";
          const searchTerm = searchInput.val();
          if (searchTerm === "") {
            errorContainer.text("Please enter a search term");
            sendHeight();
            return;
          }

const apiUrl = `https://beta.api.oemsecrets.com/partsearch?searchTerm=${searchTerm}&apiKey=21ryrlgqwzj5dyqwrmpnv75x6dh3h01csvh3lvrlssbe9uh04nv76yvo3ecpm9nb`;

loader.show();
          resultsTable.hide();
          resultsBody.empty();
          paginationContainer.empty();
          errorContainer.empty();
          $(".prduct-card").removeClass("visible");

if (dataTable !== null) {
            dataTable.destroy();
            dataTable = null;
          }

$.getJSON(apiUrl, function (data) {
            loaderMessage.text("Fetching Latest Distributor Data...").show();

loader.hide();
            resultsTable.show();

if (data && data.stock && Array.isArray(data.stock)) {
              const stockItems = data.stock;
              const totalItems = stockItems.length;
              const itemsPerPage = 10;

if (totalItems === 0) {
                errorContainer.text("No product found");
                sendHeight();
                return;
              }

const product = stockItems.find(
                (item) => item.buy_now_url && item.datasheet_url && item.description && item.image_url
              );

if (product) {
                $("#card-img").attr("src", product.image_url);
                $("#card-title").text(product.part_number + " " + "By" + " " + product.manufacturer);
                $("#card-description").text(product.description);
                $("#datesheet").attr("href", product.datasheet_url);
                $("#buynow").attr("href", product.buy_now_url);

var prices = product.prices.USD;
                var firstUnitPrice = prices[0].unit_price;
                var lastUnitPrice = prices[prices.length - 1].unit_price;
                var priceText = "<strong>$" + firstUnitPrice + "</strong> to <strong>$" + lastUnitPrice + "</strong>";

$("#card-info").html(
                  "Prices ranging from " + priceText + ". Orders starting from<strong> 1</strong> unit."
                );

$(".prduct-card").addClass("visible");
              } else {
                $(".prduct-card").removeClass("visible");
              }

const totalPages = Math.ceil(totalItems / itemsPerPage);
              dataTable = $("#results-table").DataTable(dataTableConfig);
              dataTable.clear();

function createMobileLayout(item) {
                const distributor = item.distributor;
                const availStock = item.quantity_in_stock;
                const moq = item.moq;
                const packaging = item.packaging;
                const leadTime = item.lead_time;
                const buyNowUrl = item.buy_now_url;

var prices = item.prices.USD;
                var firstUnitPrice = prices[0].unit_price;
                var lastUnitPrice = prices[prices.length - 1].unit_price;
                var firstUnitBreak = prices[0].unit_break;
                var lastUnitBreak = prices[prices.length - 1].unit_break;

const distributorCommonName = distributor.distributor_common_name;
                const distributorCountry = distributor.distributor_country;
                const distributorLogo = distributor.distributor_logo;

const mobileLayoutDiv = document.createElement("div");
                mobileLayoutDiv.className = "mobile-item";

mobileLayoutDiv.innerHTML = `
                  <div class="mobile-logo">
                    <img src="${distributorLogo}" alt="${distributorCommonName}">
                  </div>
                  <div class="mobile-details">
                    <p class="mobile-common-name">${distributorCommonName}</p>
                    <p class="mobile-stock">In Stock: ${availStock}</p>
                  </div>
                  <div class="mobile-prices">
                    <p><span>${firstUnitBreak}</span> <b>$${firstUnitPrice}</b></p>
                    <p><span>${lastUnitBreak}</span> <b>$${lastUnitPrice}</b></p>
                  </div>
                  <a class="buy-btn" href="${buyNowUrl}" target="_blank">Buy Now</a>
                `;
                return mobileLayoutDiv;
              }

$.each(stockItems, function (index, item) {
                const distributor = item.distributor;
                const availStock = item.quantity_in_stock;
                const moq = item.moq;
                const packaging = item.packaging;
                const leadTime = item.lead_time;
                const buyNowUrl = item.buy_now_url;

dataTable.row.add([
                  `<div style="text-align:center"><img src="${distributorLogo}" style="max-height:50px; max-width:50px;"></div>`,
                  distributorCommonName,
                  moq,
                  packaging,
                  distributorCountry,
                  leadTime,
                  availStock,
                  `<div style="display:flex; flex-direction:column;">
                    <div style="display:flex; justify-content:space-between; align-items:center;"><span>${firstUnitBreak}</span> <b>$${firstUnitPrice}</b></div>
                    <div style="display:flex; justify-content:space-between; align-items:center;"><span>${lastUnitBreak}</span> <b>$${lastUnitPrice}</b></div>
                  </div>`,
                  `<a class="buy-btn" href="${buyNowUrl}" target="_blank">Buy Now</a>`
                ]);

const mobileLayout = createMobileLayout(item);
                $("#mobile-layout").append(mobileLayout);
              });

dataTable.draw();
              loaderMessage.hide();
              if (totalPages > 1) { paginationContainer.show(); } else { paginationContainer.hide(); }
              sendHeight();
              setTimeout(sendHeight, 500); // Dodatno ažuriranje visine nakon renderovanja tabele
            } else {
              errorContainer.text("Error: Invalid response data format");
              sendHeight();
            }
          }).fail(function () {
            loader.hide();
            resultsTable.hide();
            errorContainer.text("Error: Failed to fetch API data");
            $("#loader-message").hide();
            $(".prduct-card").hide();
            sendHeight();
          });
        }

window.addEventListener("click", function (event) {
          const clickedElement = event.target;
          if (!suggestionsContainer.contains(clickedElement)) {
            suggestionsContainer.innerHTML = "";
          }
        });
      });

window.addEventListener("load", sendHeight);
      window.addEventListener("resize", sendHeight);
    </script>
  </body>
</html>

Powerful Features

Inventory & Pricing

Real-time stock and pricing information

Datasheets

Easily download technical specifications

Comprehensive

Access over 40M parts from 130+ distributors

An Introduction to Global Inventory Search

Get a clear overview of how Global Inventory Search works and why it’s the smarter way to find global stock.

How do I compare pricing & inventory for electronic components?

StockVolt™ is easy to use, simply enter a manufacturer part number (MPN) in the search bar to compare stock availability and prices from hundreds of global electronics distributors.

How large is Edison Elm's electronic parts database?

StockVolt™ enables engineering and sourcing professionals to access to over 40 million unique parts, across multiple categories from global electronics distributors. Parts data is sent directly from distributors and manufacturers often on a daily basis but also in real-time, to ensure data accuracy and transparency.

Which electronic part manufacturers do you work with?

StockVolt™ lists products from 5000+ manufacturers, across a broad range of electronics categories including semiconductors, connectors, passives, electromechanical, LEDs, wire & cable, test and measurement, embedded computers and more. Some manufacturers include Analog Devices, TE Connectivity, Samtec, Traco Power, National Instruments, Arduino.

Which electronic parts distributors do you work with?

StockVolt™ provides users access to part data from over 130 distributors globally including Arrow, Avnet, Digi-Key, Master, Farnell, Future, Mouser, RS and many other authorized distributors. Users are often able to order directly from the distributors online via our website by clocking the "Buy Now" links.