Question

这是我的外部链接到我的HTML文档的JS文件。我想要实现的是在html表单的输入搜索中键入一个数组属性名称的字母，然后当我提交表单时，arraylist中的匹配名称假设在具有id的div中弹出输出但它不起作用。需要一些帮助。

/* Address Book Data, this is our JSON object*/
var contacts = {
"addressBook" : [//The groupingPropertyBracket
{//The objectPropertyBracket
    "name": "hillisha",
    "email": "hill@example.com",
},
{
    "name": "paul",
    "email": "cleveland@example.com",
},
{
    "name": "vishal",
    "email": "vishal@example.com",
},
{
    "name": "mike",
    "email": "grady@example.com",
},
{
    "name": "jamie",
    "email": "dusted@example.com",
},
{
    "name": "Shantal",
    "email": "mygirlfriend@example.com",
},
{
    "name": "Vern",
    "email": "mybro@example.com",
},
{
    "name": "Tose",
    "email": "mysecondbro@example.com",
},
{
    "name": "Mehdy",
    "email": "mylittlebro@example.com",
},
{
    "name": "Mummy",
    "email": "myMother@example.com",
},
{
    "name": "Travis",
    "email": "mypadner@example.com",
}//The objectPropertyBracket
]//The groupingPropertyBracket
};
//Adding a Listener to a Form submit Event

/*define the adr object to hold your methods (aka functions) */
var adr = {
//define the form submit event method
search : function(event){
    //prevent the default bahavior
    event.preventDefault();

    //save the DOM element we're putting the output in
    var target = document.getElementById("output");

    //save the contacts JSON object to a variable
    var book = contacts.addressBook;

    /* save the length to a variable outside the loop for performance */
    var count = book.length;
    var searchValue = document.getElementById('q');
    var i;
    target.innerHTML = "";

    //check the count, ofcourse and check to see if the value isn't empty
    if(count > 0 && searchValue !== ""){            //loop through the contacts

        for(i = 0; i < count; i = i + 1) {
            //look through the name value to see if
            //it contains the searchterm string
            var obj = contacts.addressBook[i];
            isItFound = obj.name.indexOf(searchValue);

            //anything other than -1 means we found a match
            if(isItFound !== -1) {
            target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email +      '">'+ obj.email +'</a></p>';             
            }// end if
        }//end for loop
    } // end count check
}//end method
}//end object

//save the button to a variable
var btn = document.getElementById("getall"),//click
searchForm = document.getElementById("search-form");//this links to the form in HTML


searchForm.addEventListener("submit", adr.search, false);

和我的HTML表单：

<form action="" method="get" id="search-form">

        <div class="section">
            <label for="q">Search address book</label>
            <input type="search" id="q" name="q" required placeholder="type a name">
        </div> 

        <div class="button-group">
            <button type="submit" id="btn-search"> Search</button>
            <button type="button" id="getall"> Get all contacts</button>
        </div> 

    </form>
    <div id="output"></div> <!-- /#output -->

Answer 1

我查看了代码......这应该得到答案。

尝试......

var searchValue = document.getElementById('q').value;

...你需要元素的.value;你也不是在看数组，而是数组中的一个对象，所以......

var obj = contacts.addressBook[i];
isItFound = -1;
if (obj.name===searchValue) {
  isItFound = i;
}

我使用奇数isItFound = -1来补偿编写的其余代码以允许indexOf ...

这是 jsFiddle

在Javascript中搜索arraylist的项目

1 个答案: