Select2 Ajax Api

Quote:

Originally Posted by Cc_Cc_Cc Hi, ich wollte eine Select box haben wo man seinen Stadtnamen eingeben muss. Dann sollte die Stadt angezeigt werden in der Select-Box was jedoch bei mir nicht passiert. Habe ich irgendwas falsch gemacht oder etwas vergessen? Hier ist meine Seite, dort könnt ihr euch ein Überblick erschaffen der Select-Box [Only registered and activated users can see links. Click Here To Register...] Hier ist die Api [Only registered and activated users can see links. Click Here To Register...] Code: enter_city.php  Spoiler HTML Code: <script src="../js/jquery.min.js"></script> <script src="../js/select2.min.js"></script> <link rel="stylesheet" href="../css/select2.min.css"> <select class="js-data-example-ajax"> </select> <script type="text/javascript"> $(document).ready(function() { $('.js-data-example-ajax').select2({ width:'100%', ajax: { url: 'api.php', dataType: 'json', delay: 250, processResults: function (data) { return { results: data }; }, cache: true } }); }); </script> Api.php  Spoiler PHP Code: <?php     header("Content-Type: application/json; charset=UTF-8");     require_once __DIR__ . '/../config/connect.php';               if($stmt = $pdo->prepare("SELECT * FROM `dataset` WHERE `city` LIKE :city LIMIT 500;")) {                  $param = ["city" => "{$_GET['q']}%"];                  $stmt->execute($param);                  $ct = $stmt->rowCount();                  $prod = array();                  $prod['records'] = array();                  if($ct > 0) {                  while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {                      extract($row);                          $product = array(                 'id' => $row['primary_key'],                 'zipcode' => $row['zipcode'],                 'city' => $row['city'],                 'state' => $row['state'],                 'community' => $row['community']             );                          array_push($prod["records"], $product);                  }         http_response_code(200);                  echo json_encode($prod, JSON_UNESCAPED_UNICODE);                  } else {                          echo json_encode(array("Message" => "City not found"));                      }     }      ?>

$('body').append('<link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">')

$('body').html("<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css'><select class='js-data-example-ajax'></select><script>$(document).ready(function() {  $('.js-data-example-ajax').select2({    width:'100%',    ajax: {      url: 'https://wantdatas.eu/pages/api.php',      dataType: 'json',      delay: 250,      processResults: function (data) {      console.log(data);        return {          results: data.records        };      },      cache: true    }  });});</script>")

Quote:

Originally Posted by .ƒaℓsє. Wenn du folgendes einfach mal in die Konsole eingibst und dann im Input suchst, siehst du in der Konsole das auch richtig gesucht wird... Nur das Json ist u.a. falsch aufgebaut ;)

<script type="text/javascript">	
	$(document).ready(function() {

$(".js-data-example-ajax").select2(
    {
		width:'100%',
        ajax: {
            url: 'https://api.github.com/search/repositories',
            dataType: 'json',
            type: "GET",
            delay: 250,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                    var res = data.items.map(function (item) {
                        return {id: item.id, text: item.name};
                    });
                return {
                    results: res
                };
            }
        },

      });
});
</script>

Quote:

jQuery.Deferred exception: Cannot read property 'map' of undefined TypeError: Cannot read property

Quote:

Originally Posted by elmarcia [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...] if u compare the two apis, the one of github has an array named items, the one of yours is named records So change: $(".ajax2").select2( { width:'100%', ajax: { url: 'api.php', dataType: 'json', type: "GET", delay: 250, data: function (params) { return { q: params.term }; }, processResults: function (data) { var res = data.records.map(function (item) { return {id: item.id, text: item.name}; }); return { results: res }; } }, }); });

Quote:

Originally Posted by Cc_Cc_Cc Thank you for the answer. I have change it. The error message is away but It doesnt shows the Results

$(".ajax2").select2({

	width:'100%',
		ajax: {
			url: 'api.php',
			dataType: 'json',
			type: "GET",
			delay: 250,
			data: function (params) {
				return {
					q: params.term
			};
		},
			processResults: function (data) {
//check if results found
var res;
if(data.hasOwnProperty("records")){
res = data.records.map(function (item) {
return {id: item.id, text: item.city};
});

return {
results: res
};
}else{
return {results:[]};
}	
	},
noResults: function(query) {
      return 'No results matching: ' + query;
    }

	}
});

Quote:

Originally Posted by Cc_Cc_Cc Hab grad 1-2 Stunden alles durchgeguckt blicke aber nicht durch.

Quote:

Each object should contain, at a minimum, an id and a text property.

Quote:

You can use the ajax.processResults option to transform the data returned by your API into the format expected by Select2