json search with ajax in specific field

Asked

Viewed 1,891 times

2

How to search for data in a JSON with AJAX ? I want to search a JSON field named tag and show another field (title and url) in a div.

HTML:

<div class="Minimizado top-menu-invisible hidden-mobile hidden-md hidden-sm">
    <input id="searchterm" name="searchterm" />
    <button id="search">Buscar</button>
    <div id="results">
    </div>
</div>

JS:

<script>
    $("#searchterm").keyup(function(e) {
        var q = $("#searchterm").val();
        $.getJSON("userControls/HelpPaginas.json",
            function(data){
                $("#results").empty();
                $.each(data, function(i, item) {
                    $("#results").append("<div>" + item.title + "<br><br></div>");
                });
            }
        );
    });
</script>

JSON:

[{
    "Tag": "Toyota, Ford, Carro2, teste",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "Ford, chevy, opala, teste2",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "BMW, Audi, importado",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "Benz, Teste3, cars",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "GMC, Chevrolet, chevy, GM",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}, {
    "Tag": "HUMMER, 4x4, teste4, agora vai, teste com tag",
    "Title": "Titulo da página, teste",
    "Url": "page1.aspx"
}]

But the worst error happens! not the error in the browser, just do not search. It even makes the correct call in JSON but does not display in DIV

New: I modified the JS and brought the data, but not yet search, just returns all the data, how to search the field tag?

New JS:

 $.getJSON("../userControls/HelpPaginas.json", function (data) {
                        var html = [];

                        /* loop through array */
                        $.each(data, function (index, d) {
                            html.push("title: ", d.title, ", ",
                                      "tag: ", d.Tag, ", ",
                                      "url: ", d.Url, "<br>");
                        });

                        $("#results").html(html.join('')).css("background-color", "orange");
                    });
jquery ajax json

  • Debugging in the browsed your return in data is this JSON up?

  • Do tests using $(document).on('change blur', "#searchterm", function(e){ /* ... */ });

  • 1

    Want to filter the data based on the field tag?

  • yes...but I’m getting it now with if (d.Tag.toLowerCase.search(Fieldsearch) != -1) {

  • How are you sending the data to the server? I don’t see where on this $.getJSON you’re using the q.

2 answers

2

You can use a simple loop instead of using the $.each:

for (var i = 0; i < json.length; i++) {
    $("#results").append("<div>" + json[i].Title + "<br><br></div>");
    $("#results").append("<div>" + json[i].Tag + "<br><br></div>");
}

That way it’ll work too:

for (var i = 0; i < json.length; i++) {
    html.push("title: ", json[i].Title, ", ",
              "tag: ", json[i].Tag, ", ",
              "url: ", json[i].Url, "<br>")});
}

2


Only if left to check if what the person typed matches any tag

just add this code into the loop:

$.each(data, function(i, item) {
    aux = item.Tag.trim().toLowerCase().split(",")
   if( aux.indexOf($("#searchterm").val().trim().toLowerCase()) >= 0 )
    {
        console.log("Encontrou")
        $("#results").append("<div>" + item.Title + "<br><br></div>");
    }

});

https://jsfiddle.net/28j8Lxrq/2/

  • Jeff, what a difference the way you did and what I ended up doing. if (d.Tag.search(Campobusca) != -1) { like toLowerCase so standardizes everything to minuscule just did not understand the split(,)

  • 1

    Actually your code that I based on, didn’t contain if... the split I use to separate the tags and search for the exact value...

  • I understand, your jsfiddle seems q is not working, but I understand the logic, I will test here.

Browser other questions tagged jquery ajax json

You are not signed in. Login or sign up in order to post.