JQuery Autocomplete - Suche in Wert und Anzeige Etikett

Question

I jquery die automatische Vervollständigung auf einem Etikett/Wert Liste der Mobiltelefone bin mit:

[ { label: "Samsung Galaxy S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6", value: "Samsung Galaxy S6"}, 
..... 
] 

Ich möchte eine Forschung durchzuführen, ohne den Seriennamen specifing, das heißt, wenn der Benutzer Typen „Samsung S7“ zur automatischen Vervollständigung schlägt vor, „Samsung Galaxy S7“

ich die Quelle wie folgt zu ändern versucht:

[ { label: "Samsung Galaxy S7 Samsung S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6 Samsung S6", value: "Samsung Galaxy S6"}, 
..... 
] 

Dieser Code funktioniert, aber es ist hässlich, weil der eine utocomplete Menü zeigt "Samsung Galaxy S6 Samsung S6" anstelle eines einfachen "Samsung Galaxy S6"

Gibt es eine Möglichkeit, Forschung zu einer Eigenschaft durchzuführen, während im Menü eine andere zeigt?

Answer 1

Sie müssen Ihre benutzerdefinierte Suchlogik mit der Option source schreiben. Für einen einfachen Anwendungsfall reicht etwas wie das Folgende. Siehe jQuery UI Autocomplete widget search configuration für weitere Informationen.

Möglicherweise benötigen Sie eine komplexe Regex, um Randfälle zu behandeln (nicht notwendig, wenn Sie eine statische/vertrauenswürdige Datenquelle haben).

$(document).ready(function() { 
 

 
    var devices = [{ 
 
    label: "Samsung Galaxy S7", 
 
    value: "Samsung Galaxy S7" 
 
    }, { 
 
    label: "Samsung Galaxy S6", 
 
    value: "Samsung Galaxy S6" 
 
    }]; 
 

 
    $("#devices").autocomplete({ 
 
    source: function(req, responseFn) { 
 
     var words = req.term.split(' '); 
 
     var results = $.grep(devices, function(device, index) { 
 
     var sentence = device.label.toLowerCase(); 
 
     return words.every(function(word) { 
 
      return sentence.indexOf(word.toLowerCase()) >= 0; 
 
     }); 
 
     }); 
 
     responseFn(results); 
 
    } 
 
    }); 
 

 
});

input { 
 
    margin-top: 100px; 
 
}

<link href="https://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
 
<input type="text" id="devices" />