Google Place Autocomplete未显示在Bootstrap模式中

时间:2016-03-20 05:25:16

标签: bootstrap-modal google-maps-api-2

FIX UPDATE: 似乎我初始化盒子的方式导致了问题 这是修正它的原因

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

typedef struct list {
    char *string;
    struct list *next;
} LIST;

void freelist (struct list *node);

int main (void) {

    FILE *fp;
    char line[128];
    char file_name[20];
    LIST *current, *head;
    char *p;
    char *delim = " \t\r\n";

    head = current = NULL;
    printf ("Enter the name of the file: ");
    scanf("%s",file_name);

    fp = fopen(file_name, "r");

    while(fgets(line, sizeof(line), fp))
    {
        for (p = strtok (line, delim); p; p = strtok (NULL, delim))
        {
            LIST *node = malloc (sizeof(LIST));
            if (!(node->string = strdup (p))) {
                fprintf (stderr, "error: virtual memory exhausted.\n");
                exit (EXIT_FAILURE);
            }
            node->next = NULL;

            if (!head)
                current = head = node;
            else {
                current->next = node;
                current = current->next;
            }
        }
    }

    fclose(fp);

    for (current = head; current; current = current->next) {
        printf("   %s", current->string);
    }
    putchar ('\n');
    freelist (head);

    return 0;
}

void freelist (struct list *node)
{
    while (node) {
        struct list *victim = node;
        node = node->next;
        free (victim->string);
        free (victim);
    }
}

更新:我已经更新了代码非常简单,这个http://jsfiddle.net/g8vxmLn9/1/工作的原因是因为它使用较旧的bootstrap和jquery所以我假设因为我使用的是更新的我遇到了问题。

我只想在bootstrap(3.3)模型中显示一个自动完成框,并在键入时显示结果。

 <script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

4 个答案:

答案 0 :(得分:43)

这解决了它

<script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

答案 1 :(得分:6)

只需添加

.pac-container {
    z-index: 10000 !important;
}

答案 2 :(得分:5)

如果你还在寻找。

                    var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index', '9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    }); 

答案 3 :(得分:0)

要与 Angular 2+ 一起使用,请确保使用 ng-deep

  ::ng-deep .pac-container
  {
    z-index: 99999 !important;
  }