如何在jQuery中获取和拆分输入字段的值

时间:2018-11-19 14:17:29

标签: javascript jquery

我有一个输入搜索字段,可以在其中搜索车辆的品牌或/和型号,然后根据该术语进行搜索。

但是问题是,如果某些品牌的名称中有多个单词,而某些单词中只有一个,我该如何从模型中拆分品牌。

我的代码如下:

<input type="text" placeholder="Search make or model" id="search" />
<button type="submit" id="btn-submit">Search</button>

和javascript:

$("#btn-submit").on("click", function(e){
    let make_model = $("#search").val()
    let make = make_model.split(/ +/)[0]
})

如果我搜索具有一个单词的make和具有一个单词的model,我可以分割字符串并将第一个值用作make,第二个值用作model。就像我的例子一样。

因此,如果我搜索Audi A5,则可以按以下方式获得品牌和型号:

let make = "Audi A5".split(/ +/)[0]
let model = "Audi A5".split(/ +/)[1]

但是问题是,如果我搜索Alfa Romeo Giulietta之类的内容。然后如何分割字符串并获得正确的品牌和正确的型号。

如果我有所有品牌的列表,我可以以某种方式比较搜索词并检查品牌是否包含两个以上的单词吗?

有什么主意吗?

Here is the fiddle.

const all_makes = ['Alfa Romeo', 'Aston Martin', 'Audi', 'Volkswagen', 'Volvo']

$(function() {
  $("#btn-submit").on("click", function(e) {
    let make_model = $("#search").val()
    let make = make_model.split(/ +/)[0]
    console.log(make)
  });
});
#search {
  width: 200px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search make or model" id="search" />
<button type="submit" id="btn-submit">Search</button>

3 个答案:

答案 0 :(得分:1)

您可以使用品牌列表做出可以进行拆分的正则表达式:

const all_makes = ['Alfa Romeo', 'Aston Martin', 'Audi', 'Volkswagen', 'Volvo'];
const regex = new RegExp(`(${all_makes.join('|').replace(' ', '\\s+')}|\\S+)\\s*(.*)`, "i");

$(function() {
  $("#btn-submit").on("click", function(e) {
    let make_model = $("#search").val();
    let [_, make, model] = make_model.match(regex);
    console.log("make =", make);
    console.log("model =", model);
  });
});
#search {
  width: 200px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search make or model" id="search" />
<button type="submit" id="btn-submit">Search</button>

答案 1 :(得分:0)

在空格上进行简单的分割不会减少它-您必须在用户字符串中查找所有品牌的实例。您可以强制将其转换为小写字母,以使用户略显草率。

然后,您将获得匹配的品牌,将其拆分为字符串,修剪结果并将其用作模型。

如果您有所有品牌的列表,从列表中选择它们可能会更容易且不太可能导致用户错误。

答案 2 :(得分:0)

按照我的假设,您想在自己的情况下使用make变量作为品牌名称。

因此检查模型是否作为数组元素的子字符串存在。如果该子字符串存在,请打印该子字符串。

还请注意,搜索是区分大小写

示例输入

奥迪A5

示例输出

奥迪

示例输入

阿尔法·罗密欧·朱利埃塔

示例输出

阿尔法罗密欧

const all_makes = ['Alfa Romeo', 'Aston Martin', 'Audi', 'Volkswagen', 'Volvo']

$(function() {
  $("#btn-submit").on("click", function(e) {
    let make_model = $("#search").val()
    let make = make_model.split(/ +/)[0]
    var el = all_makes.find(a => a.includes(make));
    console.log(el)
  });
});
#search {
  width: 200px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search make or model" id="search" />
<button type="submit" id="btn-submit">Search</button>