javascript - Removing duplicates from autocomplete results Json - Stack Overflow

admin管理员组

文章数量:1402449

I have an issue where I have added two feature classes and it means that I sometimes get results which are duplicated in the autosuggest. I wondered if there is a way I can some how check for duplicates and fetch an alternative instead of showing the same result twice.

This is my code here (working): /

  $(function() {
      jQuery.ajaxSettings.traditional = true; 
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autoplete({
      source: function( request, response ) {
 $.ajax({
          url: "",
          dataType: "jsonp",
       data: {
        featureClass: ["A","P"],
        style: "full",
        maxRows: 7,
        name_startsWith: request.term,
        country: "UK"
      },           
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 1,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });

Any help or information would be much appreciated

I have an issue where I have added two feature classes and it means that I sometimes get results which are duplicated in the autosuggest. I wondered if there is a way I can some how check for duplicates and fetch an alternative instead of showing the same result twice.

This is my code here (working): http://jsfiddle/spadez/nHgMX/4/

  $(function() {
      jQuery.ajaxSettings.traditional = true; 
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autoplete({
      source: function( request, response ) {
 $.ajax({
          url: "http://ws.geonames/searchJSON",
          dataType: "jsonp",
       data: {
        featureClass: ["A","P"],
        style: "full",
        maxRows: 7,
        name_startsWith: request.term,
        country: "UK"
      },           
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 1,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });

Any help or information would be much appreciated

• javascript
• jquery
• ajax
• json

Share Improve this question Follow asked Jul 4, 2013 at 16:25 J.ZilJ.Zil 2,44988 gold badges4646 silver badges8282 bronze badges 1

• What is the hard part about detecting the duplicates? Your question right now sounds like: "please do it for me". You should show an attempt at doing it, if it doesn't work, post the actual result and what you'd actually want – Ruan Mendes Commented Jul 4, 2013 at 16:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Hard to tell exactly what you're asking. But to remove duplicates from an array of objects, you can use underscore's _.uniq()

 $.map( _.uniq(data.geonames, false, function(o){return o.adminName1})

Here's a jsfiddle that doesn't show duplicates. But again, it's hard to tell what a duplicate really is from your structure, but this code should move you in the right direction

You don't have use underscore, it's really easy to implement uniq on your own, just look at azcn2503's answer

I modified the code slightly so that it does the following:

1. Puts all the autoplete entries in to an object, with the autoplete value as the key
2. Converts this object back in to an array and returns it

By doing this, any duplicate keys simply overwrite the previous one.

The success function now looks like this:

success: function( data ) {
    var x = $.map( data.geonames, function( item ) {
        return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name
        }
    });

    // Create an object to easily filter out duplicates (key of same name will simply be reused)
    var x2 = {};
    for(var i in x) {
        x2[x[i].value] = x[i];
    }

    // Create a new array that simply converts the object in to a de-duplicated array
    var x3 = [];
    for(var i in x2) {
        x3.push(x2[i]);
    }

    // Return the array
    response(x3);
}

I have tested it and it seems to be working, although your issue with the duplicates appearing in the first place is not something I can replicate.

Updated fiddle: http://jsfiddle/nHgMX/8/

If your ajax call is returning an array with the response value, you can run it through a plugin to remove duplicate entries. Here's a plugin that I found on another SO thread somewhere a while back.

function ArrayNoDupes(array) {
    var temp = {};
    for (var i = 0; i < array.length; i++)
        temp[array[i].value] = true;
    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}

I may be mistaken, but you would implement it into your existing code by changing the following line:

source: function( ArrayNoDupes(request), response )

EDIT: Updated function per Juan Mendes' ment

本文标签： javascriptRemoving duplicates from autocomplete results JsonStack Overflow