Question

我有一个div标签，其中包含很长的发票清单。

每张发票都以“发票编号：”开头，后面有识别号码，如“发票编号：1”，“发票编号：2”等，等等。

这就是我的目标：

Invoice No.:
<input type="number" name="Search" autocomplete="off">
<input type="button" id="Search" value="Find" onclick="search();">

<div id="Invoice">
  <p>Invoice No.: 1<br> Amount: 300</p>

  <p>Invoice No.: 2<br> Amount: 1978</p>

  <p>Invoice No.: 3<br> Amount: 700</p>
</div>

<script>
  function search() {
    var str = "";
    var n = str.startsWith("Invoice No.: ");
    document.getElementById("Invoice").innerHTML = n;
  }
</script>

我想创建一个javascript / jquery搜索表单，只接受数字输入，然后在点击搜索按钮时在其中加上“Invoice No。”字样，并在搜索时跳转到该单词并突出显示结果。

Answer 1

document.querySelectorAll选择所有p标记。然后使用indexOf检查innerHTML是否具有所需的发票号。使用setAttribute将tabIndex设置为focus元素

＆＃13;

var getAllElement = document.querySelectorAll("#Invoice p")

function search() {
  var str = "";
  //var n = str.startsWith("Invoice No.: ");
  var srchVal = "Invoice No.: " + document.getElementById("num").value;
  getAllElement.forEach(function(item) {
    if (item.innerHTML.indexOf(srchVal) > -1) {
      item.classList.add('highlight');
      item.setAttribute('tabIndex', 1)
      item.focus()

    } else {
      item.removeAttribute('tabIndex');
      item.classList.remove('highlight')
    }
  })
}

＆＃13;

.highlight {
  color: green;
}

＆＃13;

Invoice No.: <input type="number" id="num" name="Search" autocomplete="off"> <input type="button" id="Search" value="Find" onclick="search();">

<div id="Invoice">
  <p>Invoice No.: 1<br> Amount: 300</p>

  <p>Invoice No.: 2<br> Amount: 1978</p>

  <p>Invoice No.: 3<br> Amount: 700</p>
  <p>Invoice No.: 4<br> Amount: 300</p>

  <p>Invoice No.: 5<br> Amount: 1978</p>

  <p>Invoice No.: 6<br> Amount: 700</p>
  <p>Invoice No.: 7<br> Amount: 300</p>

  <p>Invoice No.: 8<br> Amount: 1978</p>

  <p>Invoice No.: 9<br> Amount: 700</p>
</div>

＆＃13;

Answer 2

＆＃13;

function search() {
    var invoice = document.getElementById('invoice'+document.getElementById('numbertext').value)
    var arr_elms = document.body.getElementsByTagName("P");
    for (var i = 0; i < arr_elms.length; i++) {
      if(arr_elms[i].getAttribute("invoice") != null){  
        arr_elms[i].classList.remove('focus');
      }
    }
    if (invoice){
      invoice.classList.add('focus');
    }
    location.href = '#invoice'+document.getElementById('numbertext').value
}

＆＃13;

.focus{
  background-color: red;
  color : white;
}

＆＃13;

Invoice No.: <input type="number" name="Search" autocomplete="off" id="numbertext"> <input type="button" id="Search" value="Find" onclick="search();">

<div id="Invoice">
<p id="invoice1" invoice>Invoice No.: 1<br>
Amount: 300</p>

<p id="invoice2" invoice>Invoice No.: 2<br>
Amount: 1978</p>

<p id="invoice3" invoice>Invoice No.: 3<br>
Amount: 700</p>

<p id="invoice4" invoice>Invoice No.: 4<br>
Amount: 700</p>

<p id="invoice5" invoice>Invoice No.: 5<br>
Amount: 700</p>

<p id="invoice6" invoice>Invoice No.: 6<br>
Amount: 700</p>

<p id="invoice7" invoice>Invoice No.: 7<br>
Amount: 700</p>

<p id="invoice8" invoice>Invoice No.: 8<br>
Amount: 700</p>

<p id="invoice9" invoice>Invoice No.: 9<br>
Amount: 700</p>
</div>

＆＃13;

Answer 3

如果您可以使用jQuery，则可以遍历所有p元素并使用indexOf来匹配元素（jsfiddle）：

function searchParagraphOfInvoiceNo(number)
{
    var search = 'Invoice No.: ' + number,
            match = null;
    $('#Invoice p').each(function() {
        if ($(this).text().indexOf(search) >= 0) {
              match = $(this);
            return false;
        }
    });
    return match;
}

function focusParagraph(p)
{
    if (!p || p.length == 0) {
        return false;
    }

    $('html, body').animate({
        scrollTop: p.offset().top + 'px'
    }, 'fast');
}

var p = searchParagraphOfInvoiceNo(9);
if (p) {
    focusParagraph(p);
} else {
    alert('Not found');
}

Javascript查找带有给定前缀的发票编号

3 个答案: