Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]JQuery.autocomplete
Forum PHP.pl > Forum > Przedszkole
~dNkN!
mam problem z domyślną szerokością listy wyników skryptu JQuery.autocomplete w darmowym sklepie PrestaShop.
nie udało mi się nigdzie znaleźć informacji jakim parametrem określić szerokość tej listy.
nie mogę jej określić za pomocą CSS. domyślnie zajmuje 502px, tj. 2x więcej niż bym chciał.



ktoś jeszcze spotkał się z takim problemem? szukam rozwiązania.
Maciek1705
nie wiem skąd zerżnąłeś skrypt ;p ale szerokość ustawia się w pliku autocomplete napisanym w JS nie myl czasem z JQuery. Tam jest deklaracja szerokości itp jak nie ma trzeba dopisać.
~dNkN!
po prostu zainstalowałem PrestaShop...

możesz pokazać mi na przykładzie gdzie i jakim parametrem określić szerokość?

Kod
$.Autocompleter.defaults = {
    inputClass: "ac_input",
    resultsClass: "ac_results",
    loadingClass: "ac_loading",
    minChars: 1,
    delay: 100,
    matchCase: false,
    matchSubset: true,
    matchContains: false,
    cacheLength: 10,
    max: 60,
    mustMatch: false,
    extraParams: {},
    selectFirst: true,
    formatItem: function(row) { return row[0]; },
    formatMatch: null,
    autoFill: false,
    width: 250,
    multiple: false,
    multipleSeparator: ", ",
    highlight: function(value, term) {
        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    },
    scroll: true,
    scrollHeight: 180
};


nie wiem do czego służy w/w deklaracja szerokości ale dla mnie nie działa (zmieniłem 0->250 i dalej lipa).
mls
Zajrzyj w arkusz CSS i sprawdź co ma ustaloną szerokość na 500 bądź 502px. I zapewne to coś wpływa również na widok listy.
thek
Bo tego nie stylujesz w tym miejscu. To zwykły input o określonym id zapewne, więc zdefiniuj mu szerokość za pomocą CSS, a nie konfiguracji domyślnej plugina, bo ona przecież odpowiada za coś innego.
~dNkN!
sprawdziłem arkusz CSS w pierwszej kolejności.

Kod
.ac_results {
    /* width: 250px; dopisanie tej deklaracji kompletnie nic nie daje */
    text-align: left;
    padding: 0px;
    border: 1px solid black;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
}

.ac_results ul {
    width: 100%; /* wpływa tylko na szerokość barwy tła */
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    /*
    if width will be 100% horizontal scrollbar will apear
    when scroll mode will be used
    */
    /*width: 100%; to też wpływa tylko na szerokość barwy tła */
    font: menu;
    font-size: 12px;
    /*
    it is very important, if line-height not setted or setted
    in relative units scroll will be broken in firefox
    */
    line-height: 16px;
    overflow: hidden;
}

/*
.ac_loading {
    background: white url('indicator.gif') right center no-repeat;
}
*/

.ac_odd {
    background-color: #eee;
}

.ac_over {
    background-color: #0A246A;
    color: white;
}


mls
Zapomniałem dodać - nie arkusz od jQuery.autocomplete a swój od strony.
~dNkN!
Cytat(thek @ 2.03.2010, 22:25:02 ) *
Bo tego nie stylujesz w tym miejscu. To zwykły input o określonym id zapewne, więc zdefiniuj mu szerokość za pomocą CSS, a nie konfiguracji domyślnej plugina, bo ona przecież odpowiada za coś innego.

good point, tylko gdzie...

tak autocomplete jest osadzony na stronie
  1. <!-- Block search module HEADER -->
  2. <link rel="stylesheet" type="text/css" href="http://e-mediapark.info/sklep/css/jquery.autocomplete.css" />
  3. <script type="text/javascript" src="http://e-mediapark.info/sklep/js/jquery/jquery.autocomplete.js"></script>
  4. <!-- Block search module HEADER -->


to jest chyba tworzenie obiektu INPUT (ID="autocomplete") ?
Kod
// Create $ object for input element
    var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);


dalej nie bardzo wiem, co z tym zrobić
Spawnm
Proszę poprawić tag tematu, java != javascript
~dNkN!
Kod
/* block top search */
#header #search_block_top {
    margin: 20px 0 0 100px;
    /* background: #e5e6e7 url('../img/block_search_bg.jpg') no-repeat top right; */
    height: 25px;
    width: 336px;
    float: right;
}
#header #search_block_top p { padding: 0.4em 0 0.4em 1em; }
#header #search_block_top label, #header #search_block_top input{ float:left; }
#header #search_block_top label {
    /* background: transparent url('../img/icon/search.gif') no-repeat 0 2px; */
    float: left;
    width: 19px;
    height: 18px;
    display: block;
}
#header #search_block_top input#search_query { width: 12em; }

tym już też się bawiłem i ni-hu-hu.
thek
No to sobie ładnie prześledź "kolejkę" winksmiley.jpg Pozwól, że poprowadzę cię za rękę przyjmując, że to FAKTYCZNIE input odpowiadający z autocomplete.
[JAVASCRIPT] pobierz, plaintext
  1. var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
[JAVASCRIPT] pobierz, plaintext

Mamy input, któremu nadajemy klasę związaną z opcjami i ukrytą w inputClass
[JAVASCRIPT] pobierz, plaintext
  1. $.Autocompleter.defaults = {
  2. inputClass: "ac_input",
  3. resultsClass: "ac_results",
  4. loadingClass: "ac_loading",
[JAVASCRIPT] pobierz, plaintext
No popatrz... Mamy takie pole w defaulcie. Wewnątrz jest odwołanie do klasy ac_input. Mamy taką gdzieś w temacie? Nie widzę smile.gif I chyba tam powinieneś zerknąć. Jeśli zaś tam nic niema to sobie SAM napisz styl dla tego inputa by zdefiniować jego długość na tyle, ile chcesz.
~dNkN!
[JAVASCRIPT] pobierz, plaintext
  1. $.Autocompleter.defaults = {
  2. inputClass: "ac_input", /* to jest wyłącznie pole wpisywania tekstu */
  3. resultsClass: "ac_results", /* 'jakimś cudem' param width tej klasy nie określa szerokości listy rezultatów */
[JAVASCRIPT] pobierz, plaintext

  1. .ac_results {
  2. width: 250px; /* dopisanie tej deklaracji kompletnie nic nie daje */
  3. text-align: left;
  4. padding: 0px;
  5. border: 1px solid black;
  6. background-color: white;
  7. overflow: hidden;
  8. z-index: 99999;
  9. }
  10.  
  11. .ac_results ul {
  12. width: 50%; /* wpływa tylko na szerokość barwy tła */
  13. list-style-position: outside;
  14. list-style: none;
  15. padding: 0;
  16. margin: 0;
  17. }


oto efekt
sciana.gif

kompletnie nic z tego nie rozumiem
mls
A może pokaż cały arkusz swoich styli CSS, nie tylko te wewnątrz #header?
thek
Zmyliło mnie nieco pisanie, stąd myślałem, że chodzi o szerokość samego input smile.gif Ale skoro chodzi o szerokość wyników to pomyśl o pewnej rzeczy... Nadałeś szerokość 50% elementom listy, a nie całej liście. Z postów powyżej wynika, że testowanie dla całego UL i zmiana width też nie dawały efektów. w takim wypadku zerknij sobie czym jest w kodzie element, który jest dostaje klasę ac_results. Mam na swoich serwisach także autocomplete i wiem, że to jest sobie div, któremu można nadać szerokość smile.gif Zainstaluj sobie FireBuga a sam zobaczysz. Jeśli nie wiesz gdzie to radzę zajrzeć do kodu autocompleta, który ciągle wałkujemy. Do części $.Autocompleter.Select = function (options, input, select, config), a konkretnie function init(), bo tam masz właśnie definiowanie szerokości. A tam jak byk pisze, że odpowiada za to options.width, które to już poruszono na samym początku tego tematu. Skoro według Ciebie nie działa to spróbuj tam "na pałę" zmienić fragment
if( options.width > 0 )
element.css("width", options.width);
na
element.css("width", 250);
i zobacz jak działa smile.gif
~dNkN!
próbowałem tego jeszcze wczoraj, nie działa ohmy.gif
definiowanie elementu 'select' zarówno w globalnym jak i lokalnym pliku CSS autocomplete także nic nie dało.

przeinstalowałem dzisiaj PrestaShop na serwerze, dalej jest to samo.
nie pozostaje mi nic innego jak użycie innego skryptu.

dzięki za starania winksmiley.jpg


Cytat(mls @ 2.03.2010, 23:46:09 ) *
A może pokaż cały arkusz swoich styli CSS, nie tylko te wewnątrz #header?

cały plik CSS zajmuje ponad 60kB. dostępny jest tutaj: global.css
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.