Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Запустить скрипт из jsfiddle локально 
:(
    Опции темы
PiterLove
Дата 20.3.2017, 20:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 20.3.2017

Репутация: нет
Всего: нет



Добрый день!
Не могу запустить скрипт с это страницы на локальном пс (КСТАТИ ОТЛИЧНЫЙ СКРИПТ!)
https://jsfiddle.net/MrSnrub/pk0kf0hn/

Вроде добавил все внешние скрипты но не работает:

Код


<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js">
</script>


Может у Вас получится запустить данный автопоиск по нескольким колоннам?

вот вся страница как у меня в dreamweaver:



Код

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js">
</script>


<script>
    /*
 * jQuery UI Multicolumn Autocomplete Widget Plugin 2.1
 * Copyright (c) 2012-2014 Mark Harmon
 *
 * Depends:
 * - jQuery UI Autocomplete widget
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function () {
        this._super();
        this.widget().menu("option", "items", "> :not(.ui-widget-header)");
    },
    _renderMenu: function (ul, items) {
        var self = this,
            thead;
        if (this.options.showHeader) {
            table = $('<div class="ui-widget-header" style="width:100%"></div>');
            $.each(this.options.columns, function (index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
        $.each(items, function (index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var t = '',
            result = '';
        $.each(this.options.columns, function (index, column) {
            var whole_word = item[column.valueField ? column.valueField : index];
            var current_search_string = document.getElementById("search").value;
 
            // Highlight current search term.
            var regex = new RegExp( '(' + 
              current_search_string + ')', 'gi' );
            whole_word = whole_word.replace(
              regex, "<b>$1</b>" );

            t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + whole_word + '</span>';
        });

        result = $('<li></li>')
            .data('ui-autocomplete-item', item)
            .append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>')
            .appendTo(ul);
        return result;
    }
});

var columns = [
  {name: 'Hexadecimal Code', width: '5.5em'},
  {name: 'Name', width: '15em'},
  {name: 'RGB', minWidth: '100px'}
];
var colors = [
    [ "#EFDECD", "Almond", "(239, 222, 205)" ],
    [ "#CD9575", "Antique Brass", "(205, 149, 117)" ],
    [ "#FDD9B5", "Apricot", "(253, 217, 181)" ],
    [ "#78DBE2", "Aquamarine", "(120, 219, 226)" ],
    [ "#87A96B", "Asparagus", "(135, 169, 107)" ],
    [ "#FFA474", "Atomic Tangerine", "(255, 164, 116)" ],
    [ "#FAE7B5", "Banana Mania", "(250, 231, 181)" ],
    [ "#9F8170", "Beaver", "(159, 129, 112)" ],
    [ "#FD7C6E", "Bittersweet", "(253, 124, 110)" ],
    [ "#000000", "Black", "(0,0,0)" ],
    [ "#ACE5EE", "Blizzard Blue", "(172, 229, 238)" ],
    [ "#1F75FE", "Blue", "(31, 117, 254)" ],
    [ "#A2A2D0", "Blue Bell", "(162, 162, 208)" ],
    [ "#6699CC", "Blue Gray", "(102, 153, 204)" ],
    [ "#0D98BA", "Blue Green", "(13, 152, 186)" ],
    [ "#7366BD", "Blue Violet", "(115, 102, 189)" ],
    [ "#DE5D83", "Blush", "(222, 93, 131)" ],
    [ "#CB4154", "Brick Red", "(203, 65, 84)" ],
    [ "#B4674D", "Brown", "(180, 103, 77)" ],
    [ "#FF7F49", "Burnt Orange", "(255, 127, 73)" ],
    [ "#EA7E5D", "Burnt Sienna", "(234, 126, 93)" ],
    [ "#B0B7C6", "Cadet Blue", "(176, 183, 198)" ],
    [ "#FFFF99", "Canary", "(255, 255, 153)" ],
    [ "#1CD3A2", "Caribbean Green", "(28, 211, 162)" ],
    [ "#FFAACC", "Carnation Pink", "(255, 170, 204)" ],
    [ "#DD4492", "Cerise", "(221, 68, 146)" ],
    [ "#1DACD6", "Cerulean", "(29, 172, 214)" ],
    [ "#BC5D58", "Chestnut", "(188, 93, 88)" ],
    [ "#DD9475", "Copper", "(221, 148, 117)" ],
    [ "#9ACEEB", "Cornflower", "(154, 206, 235)" ],
    [ "#FFBCD9", "Cotton Candy", "(255, 188, 217)" ],
    [ "#FDDB6D", "Dandelion", "(253, 219, 109)" ],
    [ "#2B6CC4", "Denim", "(43, 108, 196)" ],
    [ "#EFCDB8", "Desert Sand", "(239, 205, 184)" ],
    [ "#6E5160", "Eggplant", "(110, 81, 96)" ],
    [ "#CEFF1D", "Electric Lime", "(206, 255, 29)" ],
    [ "#71BC78", "Fern", "(113, 188, 120)" ],
    [ "#6DAE81", "Forest Green", "(109, 174, 129)" ],
    [ "#C364C5", "Fuchsia", "(195, 100, 197)" ],
    [ "#CC6666", "Fuzzy Wuzzy", "(204, 102, 102)" ],
    [ "#E7C697", "Gold", "(231, 198, 151)" ],
    [ "#FCD975", "Goldenrod", "(252, 217, 117)" ],
    [ "#A8E4A0", "Granny Smith Apple", "(168, 228, 160)" ],
    [ "#95918C", "Gray", "(149, 145, 140)" ],
    [ "#1CAC78", "Green", "(28, 172, 120)" ],
    [ "#1164B4", "Green Blue", "(17, 100, 180)" ],
    [ "#F0E891", "Green Yellow", "(240, 232, 145)" ],
    [ "#FF1DCE", "Hot Magenta", "(255, 29, 206)" ],
    [ "#B2EC5D", "Inchworm", "(178, 236, 93)" ],
    [ "#5D76CB", "Indigo", "(93, 118, 203)" ],
    [ "#CA3767", "Jazzberry Jam", "(202, 55, 103)" ],
    [ "#3BB08F", "Jungle Green", "(59, 176, 143)" ],
    [ "#FEFE22", "Laser Lemon", "(254, 254, 34)" ],
    [ "#FCB4D5", "Lavender", "(252, 180, 213)" ],
    [ "#FFF44F", "Lemon Yellow", "(255, 244, 79)" ],
    [ "#FFBD88", "Macaroni and Cheese", "(255, 189, 136)" ],
    [ "#F664AF", "Magenta", "(246, 100, 175)" ],
    [ "#AAF0D1", "Magic Mint", "(170, 240, 209)" ],
    [ "#CD4A4C", "Mahogany", "(205, 74, 76)" ],
    [ "#EDD19C", "Maize", "(237, 209, 156)" ],
    [ "#979AAA", "Manatee", "(151, 154, 170)" ],
    [ "#FF8243", "Mango Tango", "(255, 130, 67)" ],
    [ "#C8385A", "Maroon", "(200, 56, 90)" ],
    [ "#EF98AA", "Mauvelous", "(239, 152, 170)" ],
    [ "#FDBCB4", "Melon", "(253, 188, 180)" ],
    [ "#1A4876", "Midnight Blue", "(26, 72, 118)" ],
    [ "#30BA8F", "Mountain Meadow", "(48, 186, 143)" ],
    [ "#C54B8C", "Mulberry", "(197, 75, 140)" ],
    [ "#1974D2", "Navy Blue", "(25, 116, 210)" ],
    [ "#FFA343", "Neon Carrot", "(255, 163, 67)" ],
    [ "#BAB86C", "Olive Green", "(186, 184, 108)" ],
    [ "#FF7538", "Orange", "(255, 117, 56)" ],
    [ "#FF2B2B", "Orange Red", "(255, 43, 43)" ],
    [ "#F8D568", "Orange Yellow", "(248, 213, 104)" ],
    [ "#E6A8D7", "Orchid", "(230, 168, 215)" ],
    [ "#414A4C", "Outer Space", "(65, 74, 76)" ],
    [ "#FF6E4A", "Outrageous Orange", "(255, 110, 74)" ],
    [ "#1CA9C9", "Pacific Blue", "(28, 169, 201)" ],
    [ "#FFCFAB", "Peach", "(255, 207, 171)" ],
    [ "#C5D0E6", "Periwinkle", "(197, 208, 230)" ],
    [ "#FDDDE6", "Piggy Pink", "(253, 221, 230)" ],
    [ "#158078", "Pine Green", "(21, 128, 120)" ],
    [ "#FC74FD", "Pink Flamingo", "(252, 116, 253)" ],
    [ "#F78FA7", "Pink Sherbet", "(247, 143, 167)" ],
    [ "#8E4585", "Plum", "(142, 69, 133)" ],
    [ "#7442C8", "Purple Heart", "(116, 66, 200)" ],
    [ "#9D81BA", "Purple Mountain's Majesty", "(157, 129, 186)" ],
    [ "#FE4EDA", "Purple Pizzazz", "(254, 78, 218)" ],
    [ "#FF496C", "Radical Red", "(255, 73, 108)" ],
    [ "#D68A59", "Raw Sienna", "(214, 138, 89)" ],
    [ "#714B23", "Raw Umber", "(113, 75, 35)" ],
    [ "#FF48D0", "Razzle Dazzle Rose", "(255, 72, 208)" ],
    [ "#E3256B", "Razzmatazz", "(227, 37, 107)" ],
    [ "#EE204D", "Red", "(238, 32, 77)" ],
    [ "#FF5349", "Red Orange", "(255, 83, 73)" ],
    [ "#C0448F", "Red Violet", "(192, 68, 143)" ],
    [ "#1FCECB", "Robin's Egg Blue", "(31, 206, 203)" ],
    [ "#7851A9", "Royal Purple", "(120, 81, 169)" ],
    [ "#FF9BAA", "Salmon", "(255, 155, 170)" ],
    [ "#FC2847", "Scarlet", "(252, 40, 71)" ],
    [ "#76FF7A", "Screamin' Green", "(118, 255, 122)" ],
    [ "#9FE2BF", "Sea Green", "(159, 226, 191)" ],
    [ "#A5694F", "Sepia", "(165, 105, 79)" ],
    [ "#8A795D", "Shadow", "(138, 121, 93)" ],
    [ "#45CEA2", "Shamrock", "(69, 206, 162)" ],
    [ "#FB7EFD", "Shocking Pink", "(251, 126, 253)" ],
    [ "#CDC5C2", "Silver", "(205, 197, 194)" ],
    [ "#80DAEB", "Sky Blue", "(128, 218, 235)" ],
    [ "#ECEABE", "Spring Green", "(236, 234, 190)" ],
    [ "#FFCF48", "Sunglow", "(255, 207, 72)" ],
    [ "#FD5E53", "Sunset Orange", "(253, 94, 83)" ],
    [ "#FAA76C", "Tan", "(250, 167, 108)" ],
    [ "#18A7B5", "Teal Blue", "(24, 167, 181)" ],
    [ "#EBC7DF", "Thistle", "(235, 199, 223)" ],
    [ "#FC89AC", "Tickle Me Pink", "(252, 137, 172)" ],
    [ "#DBD7D2", "Timberwolf", "(219, 215, 210)" ],
    [ "#17806D", "Tropical Rain Forest", "(23, 128, 109)" ],
    [ "#DEAA88", "Tumbleweed", "(222, 170, 136)" ],
    [ "#77DDE7", "Turquoise Blue", "(119, 221, 231)" ],
    [ "#FFFF66", "Unmellow Yellow", "(255, 255, 102)" ],
    [ "#926EAE", "Violet (Purple)", "(146, 110, 174)" ],
    [ "#324AB2", "Violet Blue", "(50, 74, 178)" ],
    [ "#F75394", "Violet Red", "(247, 83, 148)" ],
    [ "#FFA089", "Vivid Tangerine", "(255, 160, 137)" ],
    [ "#8F509D", "Vivid Violet", "(143, 80, 157)" ],
    [ "#FFFFFF", "White", "(255, 255, 255)" ],
    [ "#A2ADD0", "Wild Blue Yonder", "(162, 173, 208)" ],
    [ "#FF43A4", "Wild Strawberry", "(255, 67, 164)" ],
    [ "#FC6C85", "Wild Watermelon", "(252, 108, 133)" ],
    [ "#CDA4DE", "Wisteria", "(205, 164, 222)" ],
    [ "#FCE883", "Yellow", "(252, 232, 131)" ],
    [ "#C5E384", "Yellow Green", "(197, 227, 132)" ],
    [ "#FFAE42", "Yellow Orange", "(255, 174, 66)" ]
];

// Sets up the multicolumn autocomplete widget.
$("#search").mcautocomplete({
    // These next two options are what this plugin adds to the autocomplete widget.
    showHeader: false,

    columns: columns,
        source: colors,

    // Event handler for when a list item is selected.
    select: 
      function (event, ui) {

       var result_text = (ui.item)
         ? ui.item[0] + ', ' + ui.item[1] + ', ' + ui.item[2]
         : '';
 
       // this.value = (ui.item ? (ui.item[0]  + ', ' + ui.item[1] + ', ' + ui.item[2]): '');
       this.value = (ui.item ? ui.item[0] : '');
       

       $('#results').text(ui.item ? 'Selected: ' + ui.item[0] + ', ' + ui.item[1] + ', ' + ui.item[2] : 'Nothing selected, input was ' + this.value);

        return false;
      },

    minLength: 1

});
    </script>
    

<style>
    body {
  line-height: 1.25;  
  font-size: 13px;
}

ul.ui-widget {
  font-size: 13px;
  border: 0;
}

ul.ui-widget li.ui-menu-item {
  list-style-image: none;
  font-family: "Helvetica Neue",HelveticaNeue,helvetica,arial,sans-serif;
  font-size: 92%;
  font-weight: 300;
  font-style: normal;
  font-size-adjust: none;
  
  margin: 0;
  padding: 1.8px 4.55px;
  
  white-space: nowrap;
}
.ui-widget-content a {
  color: #444444;
}



ul.ui-widget li.ui-menu-item b {
  font-weight: 700;
}
#search {
  height: 25px;
}

.ui-widget-content .ui-state-focus
{
  background-color: #D6F7FF;
  background-image: none;
  border: 0;
    </style>
    
</head>

<body>

<div id="div-container" style="margin:10px 10px;padding:8px;width:400px;" 
  class="ui-widget ui-widget-content ui-corner-all">

    <div style="margin:0 0 4px 4px;">Enter a color:</div>

    <input id="search" type="text" style="padding:2px;font-size:.8em;width:300px;" />
    <div style="margin:20px 0 0 0;">
      <span id="results" style="color:#68a;"></span>
    </div>
</div>
      
</body>
</html>


PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1166 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.