jQuery UI-autocomplete mit Objekten

Ich bin mit jQuery 1.11.2 und zu versuchen, um das autocomplete-widget zu analysieren, ein Daten-array. Ich habe den Menschen in das array, Will Smith und Willem Dafoe. Ich erwartete zu sehen, dass beide die Namen werden Hinzugefügt, um die dropdown-Liste, wenn ich eingeben, Wi in das Textfeld, aber ich bekomme keine Antwort. Hier ist eine Kopie der code:

<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>

<script type="text/javascript">
$(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];
    //Below is the name of the textfield that will be autocomplete    
    $('#search').autocomplete({
        //This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
        //This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
        source:data,
        //This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the     suggestions which is the person.given_name.
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        //Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            //place the person.given_name value into the textfield called 'select_origin'...
            $('#search').val(ui.item.first_name);
            //and place the person.id into the hidden textfield called 'link_origin_id'. 
            $('#link_origin_id').val(ui.item.id);
                return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
        //For now which just want to show the person.given_name in the list.                             
    };
});
</script>


Search: <input type="text" id="search" />

Dem code ist alles in einer einzigen html-Ordner auf dem lokalen Laufwerk. Kein server involviert ist, an dieser Stelle. Auch ich habe die element untersuchen-tool für die Fehler, aber keiner wird angezeigt und alle Ressourcen werden gefunden und geladen.

Wenn Sie nichts dagegen haben, werfen Sie diese in ein JSFiddle es würde uns helfen, dir schneller helfen.

InformationsquelleAutor Darc Nawg | 2015-01-27

24

War das problem AutoVervollständigen konnte nicht machen die Quelle für seine Funktion.

Müssen Sie die Quelle von der autocomplete basiert auf JSON-Daten vorhanden mit ,
```
source: function (request, response) {
           //data :: JSON list defined
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },
```
Und, ich habe auch entfernt die .data Rückruf vom code.

Sehen den funktionierenden code hier
- Wunderbar. Eine Erklärung mit funktionierendem code. +10
- Das nicht tatsächlich scheinen die Daten filtern, die Liste, obwohl, wenn ich Schreibe 'em' ich beide Werte.
- Danke @Runcorn Ihr mein Problem lösen
- Das man nicht filtern Sie die Daten richtig.
- Es spielt keine filter richtig. Nicht um Beispiele, die nicht funktionieren.
- Arbeiten Antwort: stackoverflow.com/a/56309009/1005607
InformationsquelleAutor Runcorn

Arbeiten Antwort - mit der richtigen Filterung. Die Filterung in der akzeptierten Antwort war nicht arbeiten, denn nichts wurde geprüft, gegen request.term.

JS:

	var mydata = 
[{"id": 1, "name": "John", "age": 23},
 {"id": 2, "name": "Mary", "age": 33},
 {"id": 3, "name": "Richard", "age": 53},
 {"id": 4, "name": "Ashley", "age": 25},
 {"id": 5, "name": "Kyle", "age": 17},
 {"id": 6, "name": "Samantha", "age": 29},
 {"id": 7, "name": "David", "age": 43},
 {"id": 8, "name": "Charles", "age": 27},
 {"id": 9, "name": "Elaine", "age": 41},
 {"id": 10, "name": "William", "age": 22}
];

$('#myautocomplete').autocomplete({
		minLength: 2,
		source: function (request, response) {
			response($.map(mydata, function (obj, key) {
				
				var name = obj.name.toUpperCase();
				
				if (name.indexOf(request.term.toUpperCase()) != -1) {				
					return {
						label: obj.name + " (" + obj.age + ")", //Label for Display
						value: obj.id //Value
					}
				} else {
					return null;
				}
			}));			
		},    
		focus: function(event, ui) {
			event.preventDefault();
		},
		//Once a value in the drop down list is selected, do the following:
		select: function(event, ui) {
            event.preventDefault();
			//place the person.given_name value into the textfield called 'select_origin'...
			$('#myautocomplete').val(ui.item.label);
			//... any other tasks (like setting Hidden Fields) go here...
		}
});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>    
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

e.g. Try the string "ar" for filtering<br/>
<input id="myautocomplete" type="text" placeholder="type some key string..." />

InformationsquelleAutor gene b.

Ich habe es geschafft, damit es funktioniert wunderbar in der folgenden Weise:

$(document).on('ready',function(){
  $(function() {
    var arrLinks = [
    {% for u in users %}
      {
        nombres: "{{ u.names }} {{u.sur_names}}",
        email: "{{ u.username }}",
        documento: {{ u.identificationNumber }},
        telefono: {{ u.phone }},
        label: '{{ u.names }} {{u.sur_names}} /{{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
      },
    {% endfor %}
    ];
    $("input[name=search]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
    };
  });

});

Hinweis: ich arbeite mit symfony, vom controller sende ich ein Objekt mit den Nutzern und in der Ansicht (Zweig), die ich eine FÜR mit die ich zuweisen der javascript-Objekt, das die Daten, die ich brauche. Es ist wichtig, zu definieren, der im label alle Parameter, für die Sie suchen möchten.

Demo-Bild!

JS:

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "[email protected]",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León /[email protected] * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "[email protected]",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina /[email protected] * Doc: 736282826 - Cel: 30087654637'
          }
        ];
        $("input[name=search]").autocomplete({
            source: arrLinks
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
        };
      });

    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">

InformationsquelleAutor Fernando León

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Sehen den funktionierenden code hier