mardi 21 juin 2016

want to put 2 getJSON calls that are almost identical into one function to use inside autocomplete UI


i have to json requests that i want to turn into HTML the same way. i made two variables each with the respective urls i want, and a function with the code i dont want to have to repeat twice. but i am not sure how i would call the function inside the autocomplete jquery.

    var randomURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=info%7Cextracts&generator=random&inprop=url&exchars=175&exlimit=10&exintro=1&explaintext=1&exsectionformat=plain&grnnamespace=0&grnlimit=10&callback=?";

/*var searchURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=&generator=search&exchars=175&exlimit=20&explaintext=1&exsectionformat=wiki&exintro=1&inprop=url&gsrsearch=" + makeStringWPLus(item) + "&callback=?";*/

function populateJSON (url){
  $.getJSON(url.data.param1, function(data) {

    var pageKeys = Object.keys(data.query.pages);

    $(".results ul li").remove();


  for (var i = 0; i < pageKeys.length; i++){
    var title = data.query.pages[pageKeys[i]].title;
    var URL = data.query.pages[pageKeys[i]].fullurl;
    var extract = data.query.pages[pageKeys[i]].extract;

    var html = "<li><a href="+ URL +"><h3 class='title'>"+ title +"</h3><p>"+ extract +"</p></a></li>";

    $(".results ul").append(html);
    }
  });
}



$("button").click({param1:randomURL},populateJSON);


$("#search").autocomplete({
  appendTo: ".search-box",
  position: { collision: "fit", at: "center bottom+40"},
  open: function( event, ui ) {
    $(".results ul").css("display", "none");
    $(".ui-menu").css("display", "block");
  },
  close: function( event, ui ) {
    $(".results ul").attr("style", "initial");
  },
  select: function(event,ui){
    var item = String(ui.item.value);

    $(".results ul li").remove();
    $("#search").attr("value", ui.item.value);

    function makeStringWPLus (val){
  return val.split(" ").join("+");
}


    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=&generator=search&exchars=175&exlimit=20&explaintext=1&exsectionformat=wiki&exintro=1&inprop=url&gsrsearch=" + makeStringWPLus(item) + "&callback=?", function(data) {

  var pageKeys = Object.keys(data.query.pages);

  for (var i = 0; i < pageKeys.length; i++){
    var title = data.query.pages[pageKeys[i]].title;
    var URL = data.query.pages[pageKeys[i]].fullurl;
    var extract = data.query.pages[pageKeys[i]].extract;

    var html = "<li><a href="+ URL +"><h3 class='title'>"+ title +"</h3><p>"+ extract +"</p></a></li>";

    $(".results ul").append(html);

  }
   $( "#search" ).autocomplete( "close" ); 
});

  },
  autoFocus: true,
  source: function (request, response){
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      dataType: "jsonp",
      data:{
        "action": "opensearch",
        'format': "json",
        "search": request.term
      },
      success: function(data){
        response(data[1]);
      }

    }); 
  }
});

what i have so far so you can see what i am working with


Aucun commentaire:

Enregistrer un commentaire