javascript - 在 JS 中创建匹配/搜索功能

标签 javascript html css

这是包含所有代码的 jsfiddle 链接

https://jsfiddle.net/f45gfx2p/

HTML:

<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head> <!-- standard html tag -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    </script>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
    <title>Any Phone4You</title>
</head>
<body>
<header class="header">
<h1>Any Phone4You</h1>
</header>
<div class="main">
</div>
<div class="search">
    <form>
        <fieldset>
            <legend>Select phone brand</legend>
            <label for="sony">Sony</label>
            <input type="radio" name="brand" class="phone" value="Sony">
            <label for="motorola">Motorola</label>
            <input type="radio" name="brand" class="phone" value="Motorola">
            <label for="samsung">Samsung</label>
            <input type="radio" name="brand" class="phone" value="Samsung">
            <label for="apple">Apple</label>
            <input type="radio" name="brand" class="phone" value="Apple">
            <label for="lg">LG</label>
            <input type="radio" name="brand" class="phone" value="LG">
        </fieldset>
        <label for="phone_model">Model</label>
        <input type="text" id="phone_model" />
        <fieldset>
            <legend>Select a network</legend>
            <label for="zmobile">Z-Mobile</label>
            <input type="radio" name="net" class="network" value="Z-Mobile">
            <label for="o3">O3</label>
            <input type="radio" name="net" class="network" value="O3">
            <label for="fodavone">Fodavone</label>
            <input type="radio" name="net" class="network" value="Fodavone">
            <label for="nn">NN</label>
            <input type="radio" name="net" class="network" value="NN">
        </fieldset>
        <input type="range" name="rating" min="0" max="1000" value="0" step="50" id="range.slider" />
        <span id="range">0</span><br /><br />
        <label for="text_m">Text</label>
        <input type="text" id="text_m" />
        <label for="internet">Data</label>
        <input type="text" id="internet" />
        <label for="upcost">Upfront Cost</label>
        <input type="number" id="upcost" />
        <label for="month_cost">Monthly Cost</label>
        <input type="number" id="month_cost" />
        <label for="contract_length">Contract Length</label>
        <input type="number" id="contract_length" />
        <input type="button" value="click me" id="login">
    </form>
</div>
<footer>@Copyright Reserved by Przemyslaw Wojtas @2015-2016 !Do not copy!</footer>
    <script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

CSS:

html{
 margin: 0;
 padding: 0;
}
body{
    margin: 0;
    padding: 0;
}
.margin{
    margin-left: auto;
    margin-right: auto;
}
.textalign{
    text-align: left;
}
.textalign2{
    text-align: center;
}
.header{
    top: 2%;
    height: 20%;
    width: 100%;
    background-color: rgb(39,133,203);
    color: white;
    font-size: 36px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    display: inline-block;

}
h1{
    left: 5%;
    padding-top: 1%;
    padding-left: 1%;
    margin: 0;
}
.main{
    float: right;
    width: 80%;
    height: 1000px;
    background-color: rgb(98,204,255);
}
.search{
    float: left;
    width: 20%;
    height: 1000px;
    background-color: rgb(39,133,203);
    opacity: 0.9;
}
footer{
    clear: both;
    bottom: 0px;
    width: 100%;
    font-family: 'Yanone Kaffeesatz', sans-serif; 
}
fieldset{
    display: block;
}
form{
        font-size: 16px;
    width:100%;
        border: 1px solid;
    box-shadow: 10px 10px 5px #000000;
    background-color:rgba(255,255,255,0.4);
}/* this will style my form */
input, select, textarea{
        display: block;
        margin:2%;
}/* this style all input, select and textarea tags */
input{
    border:2px solid #CCC;
    width: 70%;
        margin-top: 2%;
}/* further styling to input tag */
textarea{
    width:50%;
    border:3px solid #CCC;
}/* further styling to textarea tag */

/*
overflow-y: scroll;
height: 200px;
*/

JS:

/*
var brand=["Motorola","Nokia","Apple","Apple","Samsung","Samsung","LG","Nokia","LG","Sony","Sony"];
var model=["StarTAC","3310","iPhone 5C","iPhone 5C","Galaxy S5","Galaxy S5","G3","Lumia 925","Optimus L7 2","Xperia Z3","Xperia Z3"];
var network=["Z-Mobile","O3","Fodavone","NN","O3","Fodavone","NN","Fodavone","NN","O3","NN"];
var minutes=["300","100","300","1000","500","600","1000","600","250","Unlimited","Unlimited"];
var texts=["3500","5000","Unlimited","Unlimited","Unlimited","Unlimited","Unlimited","Unlimited","5000","Unlimited","Unlimited"];
var data=["N/A","N/A","250MB","2GB","500MB","1GB","1GB","500MB","500MB","1GB","10GB"];
var ucost=["0","0","0","49","0","0","0","0","0","79","0"];
var mcost=["5","2","22","34","24","27","31","27","12","38","44"];
var length=["24","24","24","18","24","24","24","18","24","24","24"];
*/
function phoneContract(brand, model, network, minutes, texts, data, upcost, monthlycost, length) {
    this.brand=brand;
    this.model=model;
    this.network=network;
    this.minutes=minutes;
    this.texts=texts;
    this.data=data;
    this.upcost=upcost;
    this.monthlycost=monthlycost;
    this.length=length;
}
var contract=[];
contract.push(new phoneContract("Motorola", "StarTAC", "Z-Mobile", "300", "3500", "N/A", "0", "5", "24"));
contract.push(new phoneContract("Nokia", "3310", "O3", "100", "5000", "N/A", "0", "2", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "Fodavone", "300", "Unlimited", "250MB", "0", "22", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "NN", "1000", "Unlimited", "2GB", "49", "34", "18"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "O3", "500", "Unlimited", "500MB", "0", "24", "24"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "Fodavone", "600", "Unlimited", "1GB", "0", "27", "24"));
contract.push(new phoneContract("LG", "G3", "NN", "1000", "Unlimited", "1GB", "0", "31", "24"));
contract.push(new phoneContract("Nokia", "Lumia 925", "Fodavone", "600", "Unlimited", "500MB", "0", "27", "18"));
contract.push(new phoneContract("LG", "Optimus L7 2", "NN", "250", "5000", "500MB", "0", "12", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "O3", "Unlimited", "Unlimited", "1GB", "79", "38", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "NN", "Unlimited", "Unlimited", "10GB", "0", "44", "24"));

function checkBrand(){
    var phone
    var brandCheck;
    phone = document.getElementsByClassName("phone");
    for (var i=0;i<phone.length;i++) {
        console.log(phone[i].checked)
        if (phone[i].checked == true) {
            brandCheck = phone[i].value;
        }   
    }
    return brandCheck;
}

function checkNetwork(){
    var network
    var networkCheck
    network = document.getElementsByClassName("network");
    for (var i=0;i<network.length;i++) {
        console.log(network[i].checked)
        if (network[i].checked == true) {
        networkCheck = network[i].value;
        }
    }
    return networkCheck;
}
var button = document.getElementById("login");
button.addEventListener("click", search, false);
var minutes
function slidefunction() {
    minutes = parseInt(slider.value)
    document.getElementById("range").innerHTML = minutes + " Minutes";
    console.log(minutes);
}

var slider = document.getElementById("range.slider");
slider.addEventListener("change", slidefunction, false);


function search() {
 var brandCheck=checkBrand();
 var networkCheck=checkNetwork();
var model
model = document.getElementById("phone_model"); //???
var e
e = document.getElementById("text_m"); //checkbox
var f
f = document.getElementById("internet"); //checkbox
var g
g = document.getElementById("upcost");  //auto
var h
h = document.getElementById("month_cost"); //auto ask
var i
i = document.getElementById("contract_length"); //dropdown
    for (var p=0;p<contract.length;p++) {
    if (brandCheck == contract[p].brand &&
        model.value == contract[p].model &&
        networkCheck == contract[p].network &&
        minutes >= contract[p].minutes &&
        e.value == contract[p].texts &&
        f.value == contract[p].data &&
        g.value == contract[p].upcost &&
        h.value == contract[p].monthlycost &&
        i.value == contract[p].length) {
    document.write(contract[p].brand + " " + contract[p].model + " " + contract[p].network + " " + contract[p].minutes + " " + contract[p].texts + " " +  contract[p].data + " " + contract[p].upcost + " " + contract[p].monthlycost + " " + contract[p].length + " " + "</br>" );
    }
  }
}

基本上这个应用程序只有在它匹配数组中的所有信息时才工作，但我想工作，例如，如果它在选项上匹配很少，例如模型品牌和网络，并根据该匹配显示它的结果，所以示例显示所有来自摩托罗拉等的手机。另外我想给出匹配百分比，所以匹配有多好:)那将如何完成

最佳答案

fiddle - https://jsfiddle.net/f45gfx2p/2/ 

for (var p=0;p<contract.length;p++) {
    if (brandCheck == contract[p].brand &&
        model.value == contract[p].model &&
        networkCheck == contract[p].network &&
        minutes >= contract[p].minutes &&
        e.value == contract[p].texts &&
        f.value == contract[p].data &&
        g.value == contract[p].upcost &&
        h.value == contract[p].monthlycost &&

在上面的代码中，您使用的是 'and' && 运算符 - 这意味着所有内容都必须匹配 - model.value 必须匹配并且 networkCheck 必须匹配......等等等等。
将它们切换为 'or' || 运算符，您可以进行多种匹配。 model.value 匹配或 networkCheck 匹配。或者您可以将它们组合成您认为合适的方式。 

var percentage = 0; //create a percentage variable
if(e.value){ //check if user has selected a form element
    percentage += 1; //if an element is selected add one to percentage
}
//if a user selects 4 elements out of 8 then percentage is 50%
percentage = Math.floor((percentage / 8) * 100)); //get percentage as a percentage rather than fraction
for (var p=0;p<contract.length;p++) {
        if (brandCheck == contract[p].brand ||  //<---or instead of and
            model.value == contract[p].model ||
            networkCheck == contract[p].network ||
            minutes >= contract[p].minutes ||
            e.value == contract[p].texts ||
            f.value == contract[p].data ||
            g.value == contract[p].upcost ||
            h.value == contract[p].monthlycost ||

在匹配百分比前面 - 检查有多少个值，以及有多少个匹配项是由这些值组成的。因此，如果 g.value == contract[p].upcost 返回 true，即 8 个中有 1 个匹配，等等。

关于javascript - 在 JS 中创建匹配/搜索功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29680439/

上一篇：javascript - 自定义 jQuery 屏幕键盘

下一篇：css - Fullcalendar - 选定的日期边框

相关文章：

JavaScript 范围问题 - 节点 fs

javascript - 保持清晰间隔的间隔引用

html - 响应式图像和媒体查询

jquery - fadeIn 后动画 CSS 更改？

php - 在 echo 中格式化日期

javascript - 音乐播放器 "easy"Div prob

javascript - Jquery/javascript 检查图像是否存在并更正它

javascript - 将属性 'Scrolling=yes' 应用于所有 iFrame

javascript - 本地图类型设置为街边时，无法更改 Bing map v8 控件中的位置

javascript - 我如何访问 Electron 中的 DOM 元素？

©2024 IT工具网  联系我们