显示“无结果”;如果输入与数组名称不匹配(javascript)

displaying "no results" if input doesn't match array name (javascript)

本文关键字：无结果 不匹配 javascript 数组 如果 输入 显示      更新时间：2023-09-26

我有一个搜索函数，允许用户搜索商品，如果已存储，将显示一条消息(在我的结果div中)是否有库存。

我希望在搜索找到结果之前显示"无结果"消息。

我试过了，但是有问题。如果你们能帮忙，我会很感激的。

这是我的完整代码:

var user = document.getElementById('user');
var results = document.getElementById('results');
$('#user').keyup(function() {
  search(user.value);
});
var apples = {
  firstName: "apples",
  stock: "in stock"
};
var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};
var contacts = [apples, bananas];
function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}
function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}
function search(match) {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == match) {
      printPerson(contacts[i]);
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>

我在用户输入时添加了搜索，并在搜索完成时停止搜索。这将有助于您使用ajax请求，这将花费时间从服务器提取数据。当没有结果匹配时，则不提供数据。查看输出

var user = document.getElementById('user');
var results = document.getElementById('results');
$('#user').keydown(function() {
  results.innerHTML = 'Searching...';
});
$('#user').keyup(function() {
  search(user.value);
});
var apples = {
  firstName: "apples",
  stock: "in stock"
};
var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};
var contacts = [apples, bananas];
function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}
function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}
function search(match) {
  var contactsLength = contacts.length;
  var hasAnyMatch = false;
  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == match) {
      printPerson(contacts[i]);
      hasAnyMatch = true;
    }
  }
  if(!hasAnyMatch){
    results.innerHTML = 'No data';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>

您可以使用.onkeydown()以便在用户输入字符串时立即输出'no results'。一旦在项目集合中找到该字符串，该消息将被您的消息覆盖。

var user = document.getElementById('user');
var results = document.getElementById('results');
$('#user').keydown(function() {
  results.innerHTML = 'no results';
});
$('#user').keyup(function() {
  search(user.value);
});
var apples = {
  firstName: "apples",
  stock: "in stock"
};
var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};
var contacts = [apples, bananas];
function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}
function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}
function search(match) {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == match) {
      printPerson(contacts[i]);
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>

另一个是:

var user = document.getElementById('user');
var results = document.getElementById('results');
$('#user').keyup(function() {
  search(user.value);
});
var apples = {
  firstName: "apples",
  stock: "in stock"
};
var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};
var contacts = [apples, bananas];
function printPerson(person) {
  results.innerHTML = (person.firstName + " are " + person.stock);
}
function printError() {
  results.innerHTML = 'no results';
}
function list() {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
  }
}
function search(match) {
  var contactsLength = contacts.length;
  for (var i = 0; i < contactsLength; i++) {
    console.log(match)
    if (contacts[i].firstName == match) {
      return printPerson(contacts[i]);
    }
  }
    return printError(); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user" placeholder=" type here" />
<div id="results"></div>

见下面的代码

var apples = {
  firstName: "apples",
  stock: "in stock"
};
var bananas = {
  firstName: "bananas",
  stock: " not in stock"
};
var contacts = [apples, bananas];
var contactsLength = contacts.length;
function search(key) {
  for (var i = 0; i < contactsLength; i++) {
    if (contacts[i].firstName == key) {
      document.getElementById('results').innerHTML = (contacts[i].firstName + " are " + contacts[i].stock);
      break;
    } else {
      document.getElementById('results').innerHTML = "no results";
    }
  }
}
<input type="text" id="user" onkeyup="search(this.value)" placeholder=" type here" />
<div id="results"></div>

$("#search-button").click(function () {
    // Before you start the search --
    results.innerHTML =  "no results" ;
    // run your search here
    //then and in the callback function if the search is async
    results.innerHTML =  "x number in stock" ;
});

function search (match) {var contactlength = contacts.length;

    for (var i = 0; i < contactsLength; i++) {
        if (contacts[i].firstName == match) {
            printPerson(contacts[i]);
        else {cannotSearch ()}
        }
   }

}

函数cannotSearch () {

document.Write (
person.firstName + "are " + person.stock);
search ();

}

希望逻辑对你有用。

相关文章：